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The web is an exciting place to be right now, whether you're running an eCommerce 
shop, building digital portfolios or sharing your thoughts on a Bootstrap blog. 
Everywhere we look new frameworks and libraries are popping up, new coding 

standards are advanced and championed by fast-growing networks of developers, and 
New design trends rise and fall like chinese lanterns. Sometimes, though, it can be a bit 
tough to get to the nuts and bolts of things, and find out exactly which framework works 
best for your particular website's needs or just how to re-create the effect you saw in that 

other site's floating footer: So we've done the legwork for you — just flip to the contents. 
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P. 


essential tools and trends 


Every web designer and developer needs to have the best 
tools and a weather eye on the webscape. Here we bring you 
200 that should be on everyone's radar 


wr 
A 


very designer and developer will have their 
own set of tools that sit with the must-have 
big guns. Here we present an essential 
selection as chosen by a wealth of industry 
experts. There are tools for every element 
of the design process, from concept to completion. 
Improve your workflow, build rapid prototypes, 
unleash killer code, create graphical gorgeousness, 
and test, test, test. All the big boys are included 
- WordPress, jQuery, Google, GitHub, Sass - plus a 
multitude of tools that will become constant 
companions. Pop your free disc into your computer 
to access quick links to each and every one of them. 


OPEN STREET MAP 


www.openstreetmap.org 

OpenStreetMap is a collaborative, open source 
alternative to the commercial mapping systems offered 
by Google and Bing. When used in collaboration with 
Open Layers, Open Street Map Is capable of producing 
some very sophisticated mapping applications, and is 
often more up-to-date than its rivals due to the 
crowd-sourced nature of the cartography. 
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MOCKUPS.ME 

http://mockups.me 

Mockups.me is a free wireframe mockups creator that 
enables you to draft out pages in seconds. Design 
prototypes for your web project directly on your iPad or 
Android tablet, or by using the free web app to work 
in-browser. The UI is clean and simple to use, and offers 
a wide range of drag-and-droppable elements. 


KEYNOTE 


www.apple.com/uk/iwork/keynote 

Keynote is a presentation app that's optimised for iPads, 
created to allow designers to showcase their designs 
directly to the client in a polished, slick style. The app 
can import from and export to Microsoft PowerPoint, as 
well as export PDFs of your presentation. Currently only 
available for iDevices, this is one of the best apps in its 
class if you have the necessary Apple hardware. 


320 AND UP 
www.stuffandnonsense.co.uk/projects/320andup 
The 320 and up responsive boilerplate is a tool that has 
been used by many designers to create a ‘mobile first’ 
site. The tool has changed as its creator Andy Clarke 
has modified to ensure that the latest version of 320 
and up is better than ever. If you haven't tried it, make 
sure that you do and soon, 
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OpenWYSIWYG 
www.openwebware.com 
An extremely easy to install rich text editor written 
entirely in JavaScript. 
CKEditor http://ckeditor.com 
A fully-featured and supported rich text editor with 
plug-in architecture. 
BrowserShots www.browsershots.org 
A simple way to view a preview of your site in 
many browsers simultaneously. 
If This Then That (IFTTT) ifttt.com 
Program simple actions in response to tweets, 
Instagram photos and more! 
MailChimp www.mailchimp.com 
Create, manage and measure email newsletter 
campaigns with ease. 
SumoPaint www.sumopaint.com 
Web-based image editor with a bevy of features 
and functionality. 
Sencha Touch 
www.sencha.com/products/touch 
Very flexible JavaScript framework for building 
HTML5 mobile web apps. 
PhoneGap www.phonegap.com 
Use web technologies to develop and create native 
apps across seven platforms. 
Magento www.magentocommerce.com 
A fully-featured and very capable open-source 
eCommerce platform. 
OpenCart www.opencart.com 
Free, easy to install and feature-rich open-source 
eCommerce platform. 
Lipsum www.lipsum.com 
Generate dummy placeholder text for your 
projects quickly and simply. 
WolframAlpha API 
products.wolframalpha.com/api 
Connect with and integrate scientific charts, 
projections and data analysis. 
OpenID openid.net 
Single authentication framework for use across 
multiple websites including social media. 
Ruby on Rails rubyonrails.org 
Useful PHP framework for rapid development of 
applications with common functionality. 
Less Framework lessframework.com 
CSS grid system designed to work across multiple 
devices responsively. 
MediaCore mediacore.com 
Impressively capable Python-based video and 
multi-media Content Management System (CMS). 
ImageAlpha www.pnamini.com 
A very handy tool with which you can reduce 
24-bit PNG file sizes. 
CSS3 Button Maker 

ww.css-tricks. Xi I 
Chris Coyier's tool for creating image-less buttons 
with pure CSS3. 
ProCSSor www.procssor.com 
A web-based service for reformatting your CSS. 
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GITHUB 


V.github.com 


githu 


SOCIAL CODING 


FONT SQUIRREL'S WEBFONT GENERATOR 


www.fontsquirrel.com/tools/webfont-generator 

For a long time, using custom fonts on web pages has 
been a big challenge for web designers. Font Squirrel’s 
web font generator is a big help in this regard. After 
you've chosen a font with appropriate licensing, it will 
give you the necessary cross-browser CSS. 


T 
SQUIRREL 
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GOOGLE WEB FONTS 

www.google.com/fonts 

Google's well-filled repository of web fonts is an easy 
way to add custom fonts that are free for commercial 
use, and can be embedded using a single line of code. 
Download from a selection of hundreds of fonts in 
different styles and scripts. 


Google Fonts 
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Grumpy wizards make toxic brew for the evil Queen and Jack. 
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CONDITIONAL CLASSES 
www.paulirish.com/2008/conditional-stylesheets-vs- 
css-hacks-answer-neither 

Extra HTTP requests are bad for your page speed. So 
instead of targeting old versions of IE with separate 
stylesheets (which are also harder to maintain), use Paul 
Irish’s conditional classes method instead. It’s clean, 
easy, and it validates! 


Conditional stylesheets vs CSS hacks? Answer: Neither! 


STACK OVERFLOW 


(=I stackoverflow www.stackoverflow.com 

It's tough to avoid Stack 
Overflow when Googling for solutions to coding 
problems. It's a fantastic community that's invaluable for 
collaborative problem solving. It should be one of your 
go-to resources for getting your questions answered by 
knowledgeable developers. 


Slstackoverttow I MN EN KI EA 
Tagged Questions we) 12,123 


FEEDLY 


www.feedly.com 

Print resources are great for 
getting concepts in your 
head, but there's nothing like 
online sources for keeping 
up with trends, coding tricks, 
and more. Google Reader (or any RSS reader) will help 
you stay up-to-the-minute on hundreds of feeds, for a 
nice complement to offline reading. 


YEPNOPE.JS 

yepnopejs.com 

While Modernizr can help you detect features, yepnope 
lets you asynchronously load different scripts based on 
your feature detection results. This works great for 
avoiding loading polyfills unnecessarily, helping your 
pages load more efficiently. 


SASS/COMPASS 


ww 5-lang.com 


www.compass:style.org 


Download 


+ Editar Suppor 


+ Dewlooment 


www.incident57.com/codekit 

Codekit is gaining traction as one of the hottest apps. It 
helps you process files using a number of different 
time-saving tools - Less, Sass, Stylus, Haml, CoffeeScript, 
Compass, and more. But it does so much more than 
that. And best of all? No command-line abilities required. 


It’s like steroids for web developers 


& JsFIDDLE 
www, jsfiddle.net 


Every developer needs a place to experiment with, debug 
and share code publicly, without all the overhead of 
something like GitHub. jsFiddle has tons of great features, 
and a nice, clean, usable interface. 


“compass. 


prefixed code, CSS typography, and more. Although 
these tools are command-line based, designers who 
an't quite so familiar with the command-line can 
use one of the available GUI apps (for both Mac and 
Windows) that autom hese tasks for you. So the 
only real learning curve is related to learning the 
syntax, which has quite a few differen yen 


compared with traditional CSS. 


“compass 


www.caniuse.com 
This is a great online resource for finding browser 


support information on virtually anything. It's kept up to 
date and includes info on new CSS3 stuff, HTML5 APIs, 


and other miscellaneous DOM features. It's even great 
for browsing just to find out what's new. 
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Show all tables 


www.nicolasgallagher.com/an-introduction-to-css- 

pseudo-element-hacks 

Pseudo-elements, recently promoted by a number of 
developer bloggers, are a CSS feature that can do so 
much with so little code. They're useful for decorative, 


non-essential content, and the number of things possible 


with them is only limited by your ability to innovate. 


ultiple boxes from one HTML element allow 
r multiple backgrounds and borders 


wwwjslint.com 
JSLint is Douglas 
Crockford’s code-quality checking tool for JavaScript. 
You might not agree with all of JSLint's strict 
recommendations, but this is an essential tool for 
JavaScript developers who want code that's up to 
standards and easy to maintain and debug 
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YUI Library 

Yahoo!'s open-source JavaScript and 
CSS Framework. 

Normalize.css 


Nicolas Gallagher's modern, HTML5-ready 
alternative to CSS resets. 

YSlow 

A browser add-on that analyses webpages for 
speed improvements. 

HTMLS Cross Browser Polyfills 


A huge list of polyfills for tonnes of brand spanking 
new web technologies. 
WSC CSS Validatior Service 


The W3C's tool for checking for invalid CSS. 
HTMLS5 Please 

Helps you to use the new HTML5 and CSS3 
features responsibly. 

Roundarch Isobar Front-End Code Standards 


Pillars of front-end development are outlined in this 
extremely useful guide. 

WAVE 

A web accessibility evaluation tool from WebAIM 
SMACSS 

Jonathan Snook's great guide to scalable and 
modular CSS. 

Wufoo's Current State of HTML5 Forms 


A detailed guide for the support of new HTML5 
form features. 
StatCounter Global Stats 


Worldwide, up-to-date browser and OS stats and 
trend charts. 
jQuery Boilerplate 


A jump-start for your jQuery plug-in 
development. 
OpenCrypt IP Geo-Location API 


Use this to get your visitor's location in the world 
from their IP address. 

Flowplayer 

An easy-to-implement media player to show 
self-hosted video. 

TinyMCE 

Rich Text Editor with extensible platform for 
additional plug-in functionality, 

Subtle Patterns 

A gallery of free elegant background patterns. 
Reponsivepx 

An easy-as-pie way to test where your responsive 
design breakpoints are. 

Espresso 


The powerful Mac-based text editor with 
CSS3 support. 
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oocss 

www.github.com/stubbornella/oocss/wiki 
Object-oriented CSS is a CSS coding technique 
popularized by Nicole Sullivan. Even if you don't agree 
with all the principles and suggestions of OOCSS, you 
should definitely understand the concepts. It's sure to 
make your code cleaner, faster, and easier to maintain. 


ADOBE EDGE INSPECT 


/html.adobe.con 


Boe CKD 


github merrer 


TWITTER BOOTSTRAP 
http://twitter.github.io/bootstrap 

Bootstrap is a starting framework for web sites and 
webapps that includes ready-to-use HTML, CSS, and 
JavaScript-based modules for common UI components 
and interactions. Bootstrap helps you avoid reinventing 
the wheel, and lets you focus on innovation. 


Introducing Bootstrap. 
Mem [hh — 


Bd BACKBONE JS BACKBONEJS 


www.backbonejs.org 
Backbonejs is a web app framework that helps you 
structure your JavaScript using the well-known 
Model-View-Controller (MVC) pattern. If you want better 
structure and maintainability in complex apps, it’s well 
worth looking into the power of Backbone. 


BROWSERSTACK 


www.browserstack.com 

BrowserStack is an easy way to test your web projects 
and see how they appear in various browsers on 
different platforms and devices. It's not a full-function 
way of testing your interfaces, but it’s definitely an 
option for getting a peek at browser versions you don't 
have immediate access to. 


Live, Web-Based Browser Testing 


Instant access to all desktop and mobile browsers. 
Say goodbye to your setup of virtual machines and devices. 


Companies tat ove ut 
Microsot jQuery © atat cix Pgithub ebay Hire 
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BEN FRAIN D JONATHAN MITCHELL ALARA MILLS H À BRANDONR JONES 
Freelance front-end PHP Developer at Adeo Product designer Web designer 
developer Firebug HTML5 Elements Table CSS Hat 
Sass and Compass http/getfirebug.com Poster wwwAlaraMilis.com www.csshat.com 
wwwsass-lang.com, www.compass-stvleorg : Nibbler W3C- Markup Validation Service Subtle Patterns 
It's hard to imagine writing vanilla CSS once nibblersilktide.com validatorw3.org wwwsubtlepatterns.com 
you've got to grips with Sass and Compass. Nessus W3C - CSS Validation Service Foundation 3 


Sublime Text 2 
www.sublimetext.com 


iGsa\ I 


i http//foundation.zurb.com 


Quite simply the best all-round text editor ir Pam Turner BEN TRUYMAN CHRIS MILLS 
available. Cross-platform, infinitely extensible Sr Web Designer at Adeo Tech Leadat Critical Mass dev.opera.com editor 
and incredibly fast. Notepad++ Response JS Opera Dragonfly 


Adobe Edge Inspect 
http//htmladobe.convedge/inspect/ 


www.notepad-plus-plus.org 


Google Chrome Adobe Edge Inspect 


Check your design/build across multiple www. le.com/chrome http://htmladobe.conVedge/inspect/ 
devices without having to click refresh Twitter Bootstrap Font Awesome fortawesome.github.con/ 
on each one. twitter.gith ral : FontAwesome 


12 Web Design Tips, Tricks, & Fixes 


wwwresponsejs.com 


wwwopera.com/dragonfly 
The Opera Mobile Emulator 
www.opera.com/developer/tools/mobile 
Social networking 
i: wwwtwittercom 


CSS HAT 


www.csshat.com 

If you're still designing your layouts almost completely 
in Photoshop, and you're using CSS3 heavily, then CSS 
Hat is a must-try tool. Simply put, this Photoshop add-on 
will convert your Photoshop layer styles to CSS3 that 
you can drop right into your text editor. 


CSS Hat turns Ph 


M ~= 


Select Photoshop layer 


is no step thre 


Why they love CSS Hat? 


MODERNIZR 


www, ;modernizr. com 
Dealing with cross-browser inconsistencies has 
ongoing battle for developers since the 


lays of the Nets e Modernizr 
P e o z as 


ites JavaScript ate or users cor browsers 
don't support many new CSS3 features. But 

dernizr helps you to easily detect 
support for new web technologies, including 
CSS3, HTMLS, and miscellaneous DOM features, 
and then deal with the results (either support or 
‘non-support) accordingly. 


Modernizr 1s a JavaScript brary 
Ihat detects HTMLS and CSS3 
features in the user's browser, 


Why use Modemizr? 
Tro, 


ot cosi nen vais cts 


Get started with Modernizr 


CSS3 MEDIA QUERIES 


www.w3.org/TR/css3 


mediaqueries 


Media Queries 
W3C Recommendation 19 June 2012 


Tris Version 
ost WA or TR2012REC-css3 meraaauetes 201200101 
Latest Version: 
tan nn w2 org TRicss macau! 
Latest Eanor's Drant 
lie orgicamwgicas machacueries/ 
Previous Version 
tip ean W TR20120PR.c353-mectaquais. 201204261 


PREFIXR 

http://prefixr.com 

Prefixr is a great time-saving app that gives you 
cross-browser CSS3 in just one click. With this online 
tool (which has an API that integrates into many popular 
text editors), you can develop your code using a single 
vendor prefix and then automatically add the remaining 
code for other browsers. 


net tuts» 


Prefixr 


LIVERELOAD 

www.livereload.com 

LiveReload makes your browser's refresh button 
obsolete. Instead of making changes, then hitting F5, 
LiveReload monitors changes in the file system and 
then it will automatically make the changes live in the 
browser without a refresh. It will even compile 


CoffeeScript, Sass, Haml, and more. 


rel pouty prover 


The Web Developer Wonderland 


CSS edits and image changes apply live. 
CoffeeScript, SASS, LESS and athers just work. 
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Codelgniter codeigniter.com 

PHP-based open-source web application 
framework. Both flexible and powerful 
Siimpler siimpler.com 

Boilerplate code and files to kick-start your web 
project without unnecessary fluff. 

Open Exchange Rates 
openexchangerates.org/documentation 

Free API for getting exchange rates 
programmatically over the web. 

Flickr API www.flickr.com 

Grab and manipulate Flickr images using its API 
service directly from your code. 

Transmit www.panic.com/transmit 

Great FTP application for Mac computers from the 
makers of Coda and Diet Coda. 


Build custom maps with pe rear overlays 
using various different providers. 
ColorHunter www.colorhunter.com 
Upload a photo to get an instant colour scheme 
defined for you! 
Skitch www.skitch.com 
A useful screengrab tool that allows you to 
annotate grabs with text and marks. 
Gridless thatcoolguy.github.io 

ridless- l: 
HTMLS and CSS3 boilerplate system aimed at a 
mobile-first approach. 
Page Speed Online 

velopers.googl m es} 


Get useful hints and tips to increase the page load 
speeds on your site. 

FontStruct fontstruct.com 

Create your own typefaces using this online editor 
and creation tool. 

HootSuite hootsuite.com 

Monitor and react to your social network feeds 
using a single interface. 

Lettering js letteringis.com 

Create interactive typography easily with this 
useful JavaScript plug-in. 

Mobilize.js 
https://github.com/mobilizejs/mobilize.js 

Make existing sites more mobile orientated. 
stock.xchng sxc.hu 

Free stock photography, some without limitation - 
ideal for web designers. 

Prezi prezi.com 

Create and deploy powerpoint-style presentations 
online with this interactive tool. 

Stitches http://draeton.github.io/stitches/ 
Generate CSS Sprite sheets by uploading your 
existing images and copying the output. 

Cage cageapp.com 

Useful online tool for collaborating with other 
designers and developers. 

PDFjs gith: m/mozilla, 

Render PDF files directly as native HTML with this 
JavaScript plug-in! 
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W3C MARKUP VALIDATION SERVICE 
validator.w3.org 

The W3C's validator should be part of every developer's 
workflow. It's not going to make your code perfect, but 
it will help you track down errors and will help you 
better understand what kind of HTML is now 
considered best practice, and which elements have 
been removed from the spec. 
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CHROME DEVELOPER TOOLS 


https://developers.google.com/chrome-developer- 
tools/ 

Chrome's developer tools add-on comes bundled with 
the Chrome browser, and is essentially the Chrome 
equivalent to Firefox's Firebug and its developer tools 
add-on. You'll be continuously testing sites in Chrome, 
so its console, profiling, live CSS editing, DOM and 
resource checking tools are invaluable to your 
developer toolbox. 


YEOMAN 

www.yeoman.io 

Yeoman is a client-side stack that provides a framework 
for building web applications. The system includes a 
built-in HTTP server for previewing output, automatic 
generation of cache manifests for offline HTML5 web 
app access, image optimisation and unit testing. The 
system incorporates several other open-source tools 
and libraries making the most out of other projects. 


FIREBUG 


www.getfirebug.com 
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TYPEKIT 


http://typekit.com 

Typekit makes it easy to use a full library of fonts on 
the web for the first time. Rather than limiting you to 
commonly installed fonts, TypeKit uses a 
downloadable format that allows fonts to be 
temporarily installed in the browser. This allows font 
foundries to license their fonts without the risk of 
them being pirated, and opens up a world of 
typographic possibilities for web designers. 


THE EASIEST WAY TO USE [usycvreirevey 
Real Fonts ===. 
ON YOUR WEBSITE mmm mmm 
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HOTGLOO 


www.hotgloo.com 

HotGloo is an easy-to-use prototyping and 
wireframing system that’s entirely web based. It 
supports collaboration, allowing multiple users to 
work together to create interactive projects. 
Fully-featured tools allow for master pages as well as 
standard UI elements, and the system makes it 
simple to collect feedback for iterative improvements. 


WORDPRESS 


http://wordpr com 


TWITTER API 


dev.twitter.com 
The Twitter API provides easy access to real-time and 

limited historical data based on users, hashtags or pure 
search terms. The API can be accessed in a variety of 

ways to suit your project requirements, whether you're 
grabbing results via JavaScript or a server-side 
language, including JSON and XML. 


Extend your reach. 
Multiply your audience. 


FACEBOOK API 


developers.facebook.com 

Facebook provides an API platform that allows for 
integration with the social media platform across 
websites, mobile apps and the Facebook website itself. 
It includes sub-APIs such as OpenGraph and makes it 
simple to deploy engaging social experiences into your 
app or website without having to create all the 
plumbing from scratch. 
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MOOTOOLS 


www.mootools.net 

A popular alternative to jQuery, MooTools offers a 
framework for achieving common tasks such as 
grabbing a DOM node and assigning a CSS class. As 
with jQuery, the system is extensible and there is a rich 
ecosystem of plug-ins and extensions available. While 
not as well-known now as jQuery, MooTools uses a 
similar approach and is still very useful for rapid 
JavaScript development. 


“Have you taken the WordPress 2012 survey yet? S007 V 


Home Sheweane Themes Plugs Mobile About Doce Blog Forme Hosting 


O Penano | WordPress is web software you can use to create a beautiful 
© Seam website or blog. We like to say that WordPress is both free 
and priceless at the same time. 
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DREAMWEAVER 


www.adobe.com/products/dreamweaver 
Dreamweaver is the de facto web design tool, and while 
historically expensive is now far more accessible as a 
result of the Adobe Creative Cloud. The latest version 
offers enhanced Webkit-powered live view, live code 
and a host of integrated services including syntax 
support for jQuery, PHP, ASP.NET and more. 


ADOBE KULER 

kuler.adobe.com 

Adobe Kuler is an online colour scheming tool that uses 
mathematical equations to provide a range of palettes 
based on a core anchor colour. Features include photo 
upload to automatically create a complementary colour 
scheme, the ability to download swatch files, and store 
favourite schemes for later retrieval 
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Mogqups moqups.com 

Online tool for generating advanced 

mockups before building a website. 

The Responsinator 

www.r nsi m 

View websites in a host of resolutions for 
smartphones and tablets. 

Mustache js github.com/janl/mustache.js 

Less work with these logic-less templates for a host 
of coding languages. 

WPtouch Pro 

www. bravenewcode.com/wptouch/ 

WordPress plug-in that instantly adds a mobile 
version of site. 

Patternizer patternizer.com 

An online CSS3 stripe generator tool. 

Kendo UI www.kendoui.com 

A framework to help build HTML5 apps. 
Coffescript coffeescript.org 

Lightweight language that compiles into JavaScript. 
Codesniffer pear.php.net/package/PHP_ 
CodeSniffer 

This tool checks PHP code to a defined standard, 
Moodboard Lite 


i = 
iPad app for creating mood and inspiration boards. 
Codosaurus itunes.apple.com/us/app/ 

i ?mt=: 
FTP Client which allows you to edit your code 
directly on the server. 
Coda www.panic.com/coda 
The popular Mac-based text editor from Panic. 
Divvy www.mizage.com/divvy 
A screen workspace management tool. 
Fitvids www.fitvidsis.com 
A jQuery plug-in for fluid-width embedded videos. 
HTML-Ipsum www.html-ipsum.com 
Quick and easy Lorem Ipsum placeholder text in 
various HTML contexts. 
Sublime Text 2 www.sublimetext.com 
The feature-rich text editor for web app developers. 
Markdown 
daringfireball.net/projects/markdown 
Automatically expand marked-up text to full HTML 
using markdown. 
Video.js 
www.videojs.com 
Video player with same API for HTML5 and Flash. 
AnythingSlider 
www.css-tricks.com/examples/AnythingSlider 
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Browser/Inspector combo 
Various 
Photoshop wwwadobecom 


wwwuxpin.com 
; ColorSchemer Touch 
$ colorschemercom/touch info.php 


DietCoda http//paniccom/dietcoda 
Adobe Edge Inspect 
htto//htmiadobe.com/edge/inspect/ 


A multi-purpose content slider jQuery plug-in. 
BuySellAds 

www. buysi 

An ad network that's popular among web designers. 
Notepad++ www.notepad-plus-plus.org 

The popular and powerful text editor. 

SpritePad 

www.wearekiss.com/spritepad 


Drag-and-drop interface for creating CSS sprites. 
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JS Bin jsbin.com 

A live-rendered code sharing and testing tool, 
recently updated. 

JS Hotline javascript.pockethotline.com 

A completely free telephone hotline to help struggling 
JavaScript developers. 

Zen Coding 

A plug-in for text editors for high-speed coding. 

Git git-scm.com 

A free distributed version control system for projects. 
DocHub dochub.io 

Instant access to documentation for CSS, HTML, 
JavaScript and more. 

HTMLS - Edition for Web Developers 
developers.whatwg.org 

The HTMLS5 spec, rewritten specifically for developers. 
CSS3 Generator css3generator.com 

A tool that generates code for loads of CSS3 features. 
Animate.css daneden.me/animate 

A library of ready-to-use CSS3 animations. 

Microjs microjs.com 

Search engine that works for single-purpose 
JavaScript frameworks. 

CSS3 Click Chart css3clickchart.com 

Code, links, and examples for loads of CSS3 features. 
CodePen codepen.io 

A code sharing tool with extensive library and 
preprocessor support. 

VideoSWS praeananz.de/htmiSvideo 

A feature comparison of about two dozen HTML5 
video players. 

Skeleton www.getskeleton.com 

A boilerplate for responsive, mobile-friendly 
development of sites. 

Responsive Images Chart bit.!y/OMjKCy 

A chart with feature breakdown for many responsive 
image solutions. 

LABjs labis.com 

Script loader to enhance page performance and 
reduce resource blocking. 

RequireJS requirejs.org 

Script and module loader designed to improve speed 
and code. 

jQuery Mobile jquerymobile.com 

Touch-optimised web framework. 

Ajaxload www.ajaxload.info 

A tool for generating Ajax loading animated GIFs. 
Web Developer Toolbar 
www.chrispederick.com/work/web-developer 

The popular developer tools for Firefox and Chrome. 
Parallax,js 

stolksdorf.github.com/Parallaxis 

A JavaScript framework for creating parallax scrolling. 
Google Webmaster Tools 
www.google.com/webmasters/tools 

Webmaster tools for optimising websites for search. 
Layer Styles www.layerstyles.org 

A Photoshop-like layer styles interface that produces 
CSS code. 
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BASECAMP 


http://basecamp.com 

Basecamp is an online project management system that 
allows you to collaborate with colleagues, assign tasks 
and track progress with ease. The system provides to-do 
lists, discussion areas, an asset repository and shared 
calendar. Part of a suite of applications offered by 
37Signals including Highrise, Backpack and Campfire, 
which together provide a complete suite of 
management tools 


ej Basecamp ane we, i 


More people in more places manage 
more projects on the web today with 
77" Last week 14,432 companies kicked 
— off new projects using Basecamp. 
Today it’s your turn. 


Find out why or Start your first project for free. 


EVERNOTE 


www.evernote.com 

Evernote allows you to create a virtual scrapbook of 
webpages, photos, text and audio that you come across 
while browsing and access them on any of your devices 
including your desktop computers, phone and tablet. 
The database also allows you to create keywords and 
tags in order to quickly categorise and search for items 
in your notebook, and even uses OCR to digitise text in 
photos and images. 


DROPBOX 


www.dropbox.com 

Dropbox is a free service that allows you to store files on 
the web (in the cloud) and automatically synchronise 
them between your different computers and devices. It 
works on Android, iPhone and iPad, as well as your 
desktop computer, and supports collaboration through 
sharing of folders with your contacts. 


WETRANSFER 


www.wetransfer.com 

Wetransfer is one of a host of free services that allow 
you to easily send a file that’s too big for regular email. 
What makes this particular service stand out is the 
excellent 2GB file limit, and the ability to send multiple 
files simultaneously without having to register for an 
account, making it an ideal way to get your larger files 
around the web. 


wetranster 
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RECAPTCHA 


www.google.com/recaptcha 

reCaptcha is a free service that helps prevent spam by 
presenting a pair of words scanned from books, 
newspapers and radio show scripts that are being 
digitised. The system works by matching known words 
with unknown words, allowing users to prove they're not 
spam bots, and the Google-sponsored digitising project 
to get free translation at the same time. 
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CAKEPHP 

www.cakephp.org 

Prototype PHP-based web applications rapidly using 
boilerplate code and scaffolding. CakePHP is MIT 
licenced, and comes with a lot of the common plumbing 
already taken care of including authentication, database 
access, caching and security, CakePHP has a loyal 
following so support is good too. 


BIT.LY API 

dev.bitly.com 

The bit.ly API allows to you programmatically create 
shortened links in the same way that twitter does when 
you paste a link into its website. You can also track and 
monitor usage with some analytics support. It's a pretty 
simple service, but incredibly useful in the modern era 
of character-limited social media communication. 


ADOBE AIR 

www.adobe.com/products/air.html 

Adobe AIR allows you to deploy native applications 
across different operating systems while using standard 
web development tools such as HTML, CSS, JavaScript 
and Flash. Apps can be compiled into the AIR format, 
which is then installed directly to the host operating 
system via the web, making it ideal for developing 
desktop widgets. 


JQUERY 
jQuery ane jquery.com 
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EXPERT QUICK-PICKS 


ONDREJ SKACEL 

Interactive developer, Striker Digital 

PSPad www.pspad.com 

Lightweight-but-powerful text editor with handy 
features including FTP client, code highlighting, Lorem 
Ipsum generator, predefined HTML and much more. 
Window Resizer 
chrome.google.com/webstore/detail/ 
kkelicaakdanhinjideammmilcgefonfh? 
utm_source=chrome-ntp-icon 

Window Resizer is a Google Chrome plug-in that 
allows you to comfortably test your website in various 
predefined or your custom resolutions. 

GSAP www.greensock.com/v12 


Greensock brings the ease of animation from Flash to 
HTML. Animating DOM has never been easier. 


THORD DANIEL HEDENGREN 

Author, designer and speaker 

iPad apple.com/ipad 

The iPad is great for doing wireframes, especially 
when you complement it with a nice stylus. 
Basecamp basecamp.com 

Basecamp is a great way to organise yourself. The 
service will save you time and energy. 

GitHub is Git for the rest of us; great for managing 
your code and inviting others to collaborate. 


TOMITONTTI 

UX Lead at White Sheep Isobar, Finland 

Live View for iPhone & iPad 
www.zambetti.com/projects/liveview 

Brilliant, yet simple remote screen viewing app. See 
your design on a device while you're still designing it. 


Mobile Design Pattern Gallery 
www.mobiledesignpatterngallery.com 

A reference to mobile app design patterns, illustrated by 
hundreds of screenshots. 

Pencil en.wikipedia.org/wiki/Pencil 

Perfect tool for making quick real-size mobile interface 
sketches and paper prototypes. 


ZEH FERNANDO 

Senior Developer at firstborn 

Charles www.charlesproxy.com 

A very handy tool to inspect and manipulate the data 
gets transferred around your computer and a server. 
Chrome browser 
www.google.com/intl/en/chrome/browser/ 
Chrome's inspection and debugging tools for HTML, 
CSS and JavaScript are nothing short of revolutionary. 
Google Drive drive.google.com 

Great for making notes and sharing between the team 
Sometimes considered the poor man's Project 
Management suite, but one that is very flexible when 
used well. 


GROUP94 

Belgian design agency 
JSON |son.ora 

JSON (JavaScript Object Notation) is a lightweight 
data-interchange format. It is easy for humans to read 
and write. It is easy for machines to parse and generate 
Screen Ruler www.microfox.com 

The best solution to check if things are positioned 
pixel-perfect! We've used it since day one at group94. 
Lorempixel lorempixel.com 

Lorempixel provides dummy images width the 
dimensions of your choice. 


i Brackets brackets.io 


MAGNUS DAHLSTRAND } Wires quirktools.com/wires 
Clipmenu www.clipmenu.com } Aviary Image Editor 
BetterSnapTool advanced, aviary.com/tools/ 


https://itunes.apple.com/gb/app/ 
bettersnaptool/id417375580 


image-editor 


; SCOTT STAAB 


MARCEL KORNBLUM 

Charles charlesproxy.com 
Liveview zambetti.com/projects/ 
liveview 

OmniGraffle www.omnigroup. 


com/products/omnigraffle 


WhatTheFont 


PETE SIMMONS 

Firebug getfirebug.com 

Wamp wampserver.com/en 
Dreamweaver CS6 
http://www.adobe.com/products/ 
dreamweaver.html 


Fontcase 


fontcase 


MATTGIFFORD 
ROBERT STALEKER PhoneGap Build API build. 
Screenfly quirktools.com/ } phonegap.com/docs/api 
screenfly Í ColdFusioni0 coldfusion.com 


: Evernote www.evernote.com 
Google Image tools http://www. 


JAKUB SODOMKA 
Capture screenshot 
http://bit.ly/NmFEON 
Droplr dropIr.com/hello 


www.bohemiancoding.com/ 


LUBOS BURACINSKY 
Bootstrapjs twitter.github.com/ 
bootstrap/index.html 

Chrome Sniffer 
http://bit.ly/OsqKTG 
TexturePackerGUI 
www.codeandweb.com/ 
texturepacker 


www.myfonts.com/WhatTheFont/ 


KIERON HOWARD 
Symfony2 www.symfony.com 
GitHub www.github.com 
Terminal https://sites.google. 
com/site/terminalbpp/ 
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Tune up your website 


Debugging with Chrome’s 
JavaScript developer tools 
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avaScript development has come a long way 

in recent years, and with that progress has 

come a new set of challenges and difficulties 

when it comes to application performance. 

In the past, you might have added some 

jQuery effects to your page to hide or reveal 

text or buttons, loaded in some content with 
AJAX, or appended new elements to the DOM. But 
this was more or less always done in only a few 
places on the page, and only a few times for a given 
pageview. If you made a mistake that created dozens 
of objects in the memory and never cleaned them up, 
it usually wouldn't matter since the user would soon 
navigate to another part of your site, and you'd get a 
clean slate to start again. Likewise, if you ever 
encountered the ‘a script on this page has become 
unresponsive’ error, it was almost always because of 
a simple coding error resulting in an infinite loop. 

With the rapid growth of the single-page 
application style of site, however, as well as 
widespread adoption of so-called MV* JavaScript 
frameworks such as Backbone.js, Ember.js, and 
AngularJS, these assumptions no longer hold true. 
You might need to execute hundreds or thousands of 
operations to render out all the elements of a 
complex application, which might well run into the 
browser's execution limit and cause it to halt your 
script. In addition, the user might interact with your 
page for several minutes or several hours without 
refreshing or navigating away from it , so it can be 
easy to accidentally consume an ever-increasing 
amount of memory. 

These new challenges can be daunting, especially 
for new developers. Fortunately, there are some very 
good browser-based profiling tools for tracking down 
these problems, and some simple techniques we can 
use for resolving them. 

Chances are you're already familiar with the 
excellent set of developer tools available in Google's 
Chrome browser. However, it's more than likely that 
you've spent most of your time using the inspector in 
the Elements, Network, Console and perhaps 
Resources tabs. 

The performance debugging tools we'll be looking 
at in this article live in the Timeline and Profiles tabs. 


MEMORY TIMELINE 


a The Timeline tab allows you to mapa 
\] chart of a page’s memory use over time. 
This is a great way to begin your 
investigation into potentially sluggish 
performance: if your app is leaking memory like a 
sieve, it will become quickly apparent. 

To use the Timeline, open the Web Inspector 
(Tools>Developer Tools from the Chrome menu) and 
select the Timeline tab. Select Memory from the 
left-hand menu. At the bottom of the developer tools 
panel, there's a solid circle icon (Record) which is 
used to begin recording the timeline. Click this, then 
interact with your page for a few seconds and you'll 
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see the timeline begin to appear. Under normal 
circumstances (assuming your app isn't leaking 
memory), you'll see the amount of memory used 
increase and decrease over time, generally returning 
to a baseline level. However, if there's a problem, you 
might see memory use continue to increase 
indefinitely and exponentially. 

Figure 1 shows an example timeline taken froma 
popular music streaming site, which is a good 
example of a big, complex, single-page JavaScript 
application. Notice that memory use increases over 
time, and then decreases suddenly every once in 
awhile. This is the actually the result of ; Ge 
JavaScript’s garbage collector regularly y 
freeing up any bits of memory being 
used by objects that are no longer 
needed on the page. 

How does the garbage 
collector know that an object Á 
can be removed from 
memory? To be frank, the 


y 
f- 


details are beyond the scope £ 


a 


Fig. 1: Anormal memory timeline - memory increases over time as new objects are created, and then decreases sharply when unneeded 
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ine clearly indicates something is going wrong - none of the objects being created can be garbage-collected, 


of this article, but in short, if an object can still be 
accessed by a reference to it, it won't be garbage- 
collected. For example, if you select a DOM node with 
jQuery and assign it to a variable, but later assign the 
value null to that variable, the jQuery object is 
essentially ‘orphaned’ and can be cleaned up 
(assuming you haven't set other references pointing 
to it). 
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Fig. 5: Selecting Comparison shows how objects have changed 
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Figure 2, for example, shows what happens when 
the Timeline is run with a page designed to consume 
more memory each time a button is clicked. 

This is exactly the kind of memory timeline you'd 
rather not see for your applications. But now that 
you know you've got memory leaks, how do you go 
about locating them so you can resolve them? 
Chrome's web developer tools have a few more 
features that will help us narrow our search 


HEAP SNAPSHOTS 


The next area of the web inspector we'll 
% be looking at is the Profiles tab. This 
actually consists of three separate tools 
grouped together because they behave similarly. Of 
the three, we'll concern ourselves primarily with the 
first and last: CPU Profiles and Heap Snapshots, 
Heap Snapshots are particularly useful for tracking 
down memory leaks, so let's start there. When you 
select Take Heap Snapshot from the Profiles tab and 
click Start, Chrome will take a snapshot of all the 
objects and DOM nodes that currently reside in the 
memory for the current page. 
Once the Snapshot is complete, you can select it 
from the left panel and explore the list of all the 
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Fig. 3: Heap Snapshots show you not only the total size in memory of all the JavaScript objects on the page, but also a detailed breakdown 


of those objects and their contents 


objects that were present at the time of the snapshot. 
Figure 3 shows one example of a Heap Snapshot. 
Since most of the objects that JavaScript has in 
memory at any given time are native to the browser, 
and not related to your code, these snapshots can be 
very difficult to navigate. However, the real benefit 
comes when you compare two snapshots. In the 


figure above, you can see that the two snapshots are 
almost exactly the same size. This would correspond 
to a flat line in the memory Timeline we saw earlier. 
If, however, you took snapshots after the amount of 
memory used by the page had grown significantly, 
the snapshots would be noticeably different as well 
Try sorting the columns by size, and see if any 
objects or arrays appear near the top of the list in the 
later snapshot that were absent or much lower in the 
earlier snapshot. Investigating those, you'll often find 
familiar object structures, as they will have been 
created by your code. This can frequently provide a 
great insight into which of the objects you're creating 
are chewing up all that memory. 
Chrome also provides some more 
sophisticated ways of comparing Heap 
Snaphsots. At the very bottom of the web 
inspector panel when you're 
viewing a snapshot, there are two. 
menus, shown in Figure 4 
(top left). If, instead of All 
objects, you select Objects 
allocated between snaps 1 
and 2, you'll be able to see 
new objects that might be 
contributing to the 
increase in memory usage. 
Even more useful, if you 
select Comparison instead of 
Summary, you'll be able to see how 


objects have changed between your selected 
snapshot and another one, as Figure 5 helpfully 
illustrates for us. 

Then it's merely a simple matter of ensuring that 
those objects are discarded when they're no longer 
needed, usually by setting the variables that refer to 
them to null. 


CPU PROFILES 


CPU Profiles allow you to record your 
page's JavaScript execution over its 
lifespan. It also provides a breakdown of 

where the browser has spent the majority of its time. 
This information can be invaluable when you need to 
track down code that is inefficient. For example, if 
you happen to discover that your page is spending 
60 per cent of its JavaScript execution time inside a 
short function, you've got a good place to start your 
optimisation efforts. 

Collecting a CPU Profile is much the same as 
taking a Heap Snapshot: in the Profiles tab, select 
Collect JavaScript CPU Profile, and click Start. You'll 
see the profile recording in the left-hand panel. Once 
you've interacted with the problematic parts of your 
application, you can click Stop, then select the profile 
and inspect it. 

The Self column gives you the amount of time 
spent inside each function, while the Total column 
adds in time spent in functions called by that 
function. You can expand each function to see a 
trace of where it was called from, and also click on 
the filename to see the function highlighted in the 
source code. 

Figure 6 (to the right) shows how a bit of digging 
can reveal where a problem lies. At first glance, most 
of the execution time seems to take place inside of 
jQuery, which isn’t much use to us. However, by 
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Fig. 7: To get a full insight into how the Web Workers API operates, visit the Mozilla Developer Network: developer.mozilla.org 


traversing back up through the trace, we find the 
place in our code where all these expensive jQuery 
calls are originating: line 3 of main.js. 


USING TIMERS TO WORK AROUND 
EXECUTION LIMITS 


Most often, you'll be delving into these 


browser tools to try to ameliorate an 
application's sluggish performance. But sometimes 
you're dealing with a more serious issue: the browser 
locks up completely while trying to perform some 
complex operation, and alerts that a script on the 
page has become unresponsive. 

Some browsers will alert this warning after a given 
number of script instructions have been executed, 
while others allow the script to run for a set number 
of seconds, but the core problem is the same: your 
script is trying to do too much in a single go. 
Sometimes you'll be able to make your code more 
efficient, requiring fewer operations to reach the 
same result. However, this won't always be possible. 

The ideal solution to this problem is to use the 
Web Workers API introduced in HTMLS, which allows 
you to delegate certain operations to background 
processes that won't lock up execution of your script 
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(check out Figure 7 above). However, web workers 
come with two significant limitations: they're not 
supported in Internet Explorer (surprise surprise) 
below version 10 (which has yet to be released), or in 
the default Android browser (though they are 
supported in Chrome or Firefox for Android). What’s 
more, the background jobs have to be self-contained 
JavaScript files, and they run in a sandbox without 
any access to the rest of your scripts. That means no 
jQuery, and none of your Backbone models or views. 
If you're able to isolate some pure JavaScript 
heavy lifting that can easily be isolated from the rest 
of your code, and you're happy with the level of 
browser support afforded by web workers, they're a 
great solution. That said, a discussion of the Web 
Workers API is beyond the scope of this article. If 
you're interested in learning more about the API, the 
Mozilla Developer Network has an excellent article 


covering the basics at developer.mozilla.org/en-US/ 


docs/Web/Guide/Performance/Using_web_workers. 


However, if those conditions don't apply to you, 
there's still a way out. Using JavaScript'’s built-in timer 
functions, you can split out your one giant execution 
thread into a series of callback functions that will 
execute over a short span of time, giving the browser 
the illusion that your script has completed. 
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Fig. 6: Although much of the CPU time spent by your application will take place inside library code, a bit of digging will reveal which 


of your functions is to blame 
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For example, let’s say you have a large array of 
Backbone views that you want to render, and 
rendering each of them requires a fair amount of 
processing; enough that your loop is causing the 
script to lock up and the browser to complain. Your 
code looks like this: 


setTimeout(function() { 


var view = views.shift(); 


view. render (); 
if (views.length > 0) { 


setTimeout (arguments. 


The timer renders the view, then sets up another 
timer to render the next view 20 milliseconds later. To 
the user, the views will appear to be drawn instantly, 
and the browser will happily run your script for as 
long as it takes, since each render takes place ina 
callback function, rather than taking place in the 
original operation 

You'll need to adapt this idea a little for your code, 
but the idea should be clear: rather than performing 
your computationally intensive processes directly 
inside the loop, spin them out into timer callbacks 


GET UP TO SPEED 


Debugging and resolving JavaScript performance 
problems can be tricky - certainly much trickier than 
debugging coding errors. But with the help of the 
strong diagnostic tools that are present in modern 
browsers, and in Google Chrome specifically, it 
becomes a little bit easier to locate the source of a 
problem and begin to think about how to resolve it. 
Combine this with a little bit of know-how about 
improving performance, and your application should 
be speeding along in no time. 
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Power up WordPress to the next level 
Learn how to make your site stand out from the crowd 


Essential tools for a front-end developer 
Ever wondered what the pros use in their workflows? 


A crash course in Git 
Get up to speed with the popular version control system 


Learn a modern PHP framework: Laravel 
Find out why Laravel is taking the community by storm 


Getting to know the Twitter API 


Delve into the intricacies of Twitter integration 


Use the Facebook API with your website 
Access the data behind Facebook with this powerful API 


Integrate eCommerce stores with Facebook 
Increase the reach of your business today 


‘laracon, 


Wy 


Laracon Europe is two-day event in istorie 
[Ariteraam where youll meet many members ofthe 
LCaravel community and isten to engaging presentations 

‘about the art "engineering and more 


Harness 
modern tools 
& frameworks 


Jo 


Add vibrance to an eCommerce store 
Simplify selling with beautifully designed pages 


62 
64 
70 
76 
78 


8 Make the most of HTML5’s localStorage 


Store data locally without the need for cookies 


Create tabbed boxes with WordPress 
Make a tabbed box with multiple loops for WP themes 


Make a complete Author Box plug-in 
Add a personal stamp complete with links to your posts 


Apply individual styles to links 


See the strength of minimal design online 


Set up your own online magazine 
Make a stylish, responsive magazine 


8 Build a Linux server, parts 1 and 2 


Repurpose an old PC by turning it into a dev server 


LA MONDA 


REVISTA NOT 
BLOG/DIARIO 
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| Visual composer 


Must Have Plugin for 


See how easy 
itis 


Quform 


and drop form builder for WordPress, Ready to use forms in just a few clicks 


Live form builde 


Quform is available exclusively on CodeCanyon.net 


# About Quform 


Qutorm a an advanced WordPress plugin vat 
‘tows you 1o creste mutola forma quoy and 
asiy Using our form buldor is made senpia win 
arag ana drop ang one ck tunctonaity and t 
works in ai major browser ts compatible wih 
\WorgPresa versions 31 ans above 


4 Features 


No coding requi Premium WP Plugin 


a Testimonials 


“ Thanks again.. groat app Cart balove you guys 
ware adi io make the tedious task form bulcing 
fast ond An, yosh 1 ald a 


[Press SEO plugin by Yoast. 


pod piattorm for SEO, tha was ive 
and it wil ue today, bt that 
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post do Vak vo improve your aite's 
9008 the entra md to tako 

‘rat and foremost hela you wre 

Tocun keyword when you'e wring 

yword overywhoro 


‘at your post or page wil ook the in 
vont and your meta doseroron 

the plugin wl heip you rt oniy 
organ soarch rut 


Requires: 3.1 or higher 
Compatible up to: 3.5.1 
Last Updated: 2013-1-14 
Downloade: 9,629,100 


Ringe 


kikk 
47 on ot 5 stars 


TO THE NEXT LEVEL 


Asmore people discover the potential of WordPress, 
youll need to dig deeper to make your site stand out 


he WordPress CMS works great ‘out of the 

box’. With its famous five-minute install, 

WordPress powers over 25 per cent of the 
world’s websites and comes in two distinct versions. 

WordPress.com provides a great introduction for 
less technical users who just want a website that 
works. No doubt there are a number of very 
attractive benefits, including no hosting fees and no 
maintenance, with automatic updates, backups and 
optimisation. However, this has to be balanced 
against limited themes and no plug-in support. 

Since you're reading this bookazine you're almost 
certainly more interested in WordPress.org, where 
you have to take care of the website hosting yourself 
but, under the terms of the GNU General Public 
License, you are pretty much free to do what you 
want with your installation. 

With freedom comes responsibility, though, and 
you owe it to yourself (and to your client - if you are 
working for one) to make your WordPress site the 
best it can be. Google reports about 139 million 


results (February 2013) for the phrase ‘just another 
WordPress site’ which is automatically published for 
all new WordPress sites, While you probably know 
how to get rid of this cleverly conscience-pricking 
tagline (Settings>General>Tagline), don't fool yourself 
into believing that removing that tagline by itself 
makes your WordPress website anything more than 
just another WordPress site’ 

Daft Punk nearly had it right with their 2001 hit, 
but you need to be aiming for Easier, Better, Faster, 
Stronger as your mantra. Ultimately, the 
improvements you can make are only limited by your 
time and technical ability. 

So, where to begin? Plug-ins are probably the most 
widely used WordPress ‘enhancements’ and the 
following pages will introduce five of the most 
popular that are likely to benefit any site. 

Why stop at ‘free’, though? If you're investing in 
hosting and a significant amount of your own time 
(and hopefully charging good money for your 
services), there is an abundance of premium plug-ins. 


ranging from less than £2 to more than £25, that will 
provide functionality not found elsewhere 

Five (and a bit more) popular premium plug-ins are 
reviewed here to help you dip your toe into the world 
of paid-for code. 

No amount of free or paid-for plug-ins will set your 
WordPress site apart, though, if your theme isn’t up 
to muster, Premium WordPress themes tend to 
follow, and occasionally lead, general web 
technology trends. It's definitely worth checking out 
the bestselling premium themes because they 
deliver, in their own way, emerging practices that we 
soon won't want to live without. For example, the 
majority of the top 50 template sales on the popular 
themeforest.net site are for responsive templates - 
when during 2012, responsive themes were only just 
starting to be launched 

Finally there is some advice on choosing a host, 
how to ensure the server is properly configured and 
what tools you might like to use to ensure everything 
is as it should be. Hold on tight, it’s time to power up! 


IMPROVE YOUR 
WEBSITE’S SEARCH 
ENGINE RANKING 


WordPress SEO by Yoast 


wordpress.org/extend/plugins/wordpress-seo 


earch engine optimisation can be daunting, so 
it comes as a relief that WordPress SEO by 
Yoast is easy to use 
Once activated, head over to any site page to see 
where the main action happens. The first real 
decision is to choose your ‘focus keyword’ - that is 
the word or words you want this page to be found for. 
There's a button that will suggest related keywords to 
help refine your thinking. Once you've chosen one, 
the plug-in will analyse your content and confirm if 
that keyword appears in your article heading, page 
title, page URL, content and meta description and 
you'll be rewarded with green text or flagged with 
red text depending on the results. 
After you've carefully crafted your page snipped 
on this plug-in tab, you should go to ‘page analysis 
This tabbed page also uses a colour code system 
from red for ‘needs attention’ to green for ‘all good 
- for a wide range of measures including reading 
ease, number of words on the page and whether 
your keyword appears within the first paragraph. As 
you work through each point, you should eventually 
turn the overall colour for that page green. You can 
give yourself a pat on the back but should also move 
on to the next page, and the next, until you have 
scored green on as many pages as possible. 
There are advanced options to explore, but you 
might want to do all the most obvious work first and 
then move on to tweaking and refining. 


SUPERCHARGE 


SUITE OF PLUG-INS 


Jetpack by WordPress.com 


wordpress.org/extend/plugins/jetpack 


nstalling Jetpack is like installing (currently) 24 
plug-ins in one go. 

Before you get started you'll need to go and 
create a WordPress.com account if you don't already 
have one set up. 

Okay, you might not need to use every one of 
Jetpack’s features (for example Latex - a ‘powerful 
markup language for writing complex mathematical 
equations’), but don't let that put you off the real big 
hitters that installing this plug-in gives you. 

First, there's WordPress.com stats and yes, you can 
and probably should have Google Analytics installed, 
but these stats are handy, right there in the site’s 
admin area (and with a nice 48-hour summary chart 


Tips 


WordPress SEO by Yoast 


Improve your WordPress SEO: Write better content and have a fully 
optimized WordPress site using the WordPress SEO plugin by Yoast. 


Installation FAQ Screenshots Changelog Stats Support Reviews 


jordPress out of the box is already technically quite a good platform for SEO, this was true 

yen | wrote my original WordPress SEO article in 2008 and it's still true today, but that 
Hoesn't mean you can't improve it further! This plugin is written from the ground up by 

jordPress SEO consultant and WordPress developer Joost de Valk to improve your site's 


SEO on all needed aspects. While this Word 


Developers 


Requires: 3.1 or higher 
Compatible up to: 3.5.1 
Last Updated: 2013-1-14 
Downloads: 3,633,189 


SEO plugin goes the extra mile to take 


Ratings 


Welcome to Jetpack 2.2! 


WordPress.com Stats Publicize 


Simple, concise site Connect your site to 


stats with no popular social 
additional load on networks and 
your server. tomatically share 
new posts with your 


friends. 


Learn More || Configure Leam More || Configure 


Subscriptions 


Allow users to 


Post by Email 


Publish posts to your 


subscribe to your blog directly from 


Notifications 


Monitor and manage 
your site's activity 
with Notifications in 
your Toolbar and on 
‘WordPress.com, 


W Jetpack is a suite of plug-ins that offers a URL shortener, statistics, social media integration and a free CDN 


there too - which will quickly help you spot any 
sudden spikes in traffic). 

Photon is one of the newest additions to the 
Jetpack suite. It’s basically a free, zero-configuration 
content delivery network for your site. 

Extra Sidebar Widgets provides seven useful 
additional widgets including a Twitter feed, Blog 
subscription sign-up, mini Gravatar profile, Facebook 


Like Box,a widget to display an image in your sidebar, 


RSS links, and Top Posts and Pages. 


There are two gallery enhancements available. 
Carousel transforms your standard image gallery into 
an ‘immersive full-screen experience’, while Tile 
Galleries (which is powered by Photon, whether or 
not you have that option activated) creates a groovy 
magazine-style mosaic of your images. 

With 19 further plug-ins to explore, you're very 
likely to find something in Jetpack that will improve 
your site and there's always the hope of new plug-ins 
around the corner. 


Tips 


SECURE YOUR 
WORDPRESS 
WEBSITE AGAINST 
HACKERS 


Better WP Security 


wordpress.org/plugins/better-wp-security 


f you don't have appropriate security in place, 

you might well wake up one day to find that you 

no longer have a website at all. So before 
investing time in making your site better, it’s essential 
to secure your installation. This plug-in combines a 
wide range of security features and techniques to 
help you harden your WordPress site against attack 
from hackers. 

The developers have usefully identified those 
features that can easily be implemented and 
features that should be considered more carefully 
to avoid conflicts with other plug-ins, themes or 
server configurations. 

The security measures are categorised into 
Obscuring (hiding information or access to your site), 
Protecting (restricting or banning access, 
strengthening server security), Detecting (reporting 
unauthorised access or file changes) and Recovering 
(backing up your site on a regular basis in case the 
worst should happen). 

In the plug-in dashboard, colour codes are used to 
indicate the security status of your site against 21 
measures. Green-indicated items are fully secured, 
orange items are partially secured, red are not 
secured (you are urged to secure these items 
immediately) and blue are not fully secured items that 
might conflict with other site factors, which you 
should secure if you can. 

Some example security measures include 
enforcing strong passwords (with inadequate 
passwords being a common security failure) and 
restricting administration access to certain times of 
the day only (as many bank vaults do). The plug-in can 
also be configured to ban access from specific IP 
addresses by reference to blacklists or following 
repeated login failures. 


8 Better WP Security - System Status 
BL] Dashboard 


System Status 


k here to fix 
You e in to users. Click here 
Non-administrators cannot see available updates. 
The admin user has been rer 


Click here to rename it. 


1 
2 
3 
4, 
5. The user with id 1 has 
6 
7. 
8. 
9. 


Œ System status info is colour-coded for easy recognition 
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Extending WordPress 


A super customizable contact form that lets your visitors send you 


email. Blocks all automated spammers. No templates to mess with. 


This plugin allows a webmaster to easily create and add contact forms to WordPress. The 
contact form will let the user send emails to a site's admin, and also send a meeting 


request to talk over phone or video. An administration panel is present, where the 


webmaster can create and preview unlimited forms. 


Features: easy form edit, multiple forme, confirmation emaile, no tomplatos to mess with, 


Requires: 3.4.2 or higher 
Compatible up to: 3.5.2 
Last Updated: 2013-6-27 
Downloads: 3,687,677 


Ratings 


and an option to redirect visitors to any URL after the message is sent. Includes CAPTCHA 


and Akismet support to block spammers. Spam is no longer a problem. You can add extra 


4.5 out of 5 stars 


@ The Fast Secure Contact Form plug-in is a quick and easy method for adding forms toa site 


“In the plug-in dashboard, colour codes are 
used to indicate the security status of your site” 


BACK UP YOUR 
WORDPRESS SITE 


WordPress Backup to Dropbox 


wordpress.org/plugins/wordpress-backup-to- 
dropbox 


ile Better WP Security can back up your 
WordPress database and email it to you, 
WordPress Backup to Dropbox provides 
even more peace of mind against server failures. 
This plug-in works with Dropbox (you'll need to 
register a free account) and can be configured to back 
up not only your WordPress database but your entire 
WordPress installation and media library. Better still, 
the whole lot is all backed up to the cloud so even if 
your server and your local machine fail at the same 
time, Dropbox's service has still got your back(up). 
You'll need to ensure the backup doesn't exceed 
your Dropbox usage allowance, but the free service 
starts ata generous 2GB. You're also given an extra 
500MB each time you refer Dropbox to someone; so 
if you build sites for others, you can refer Dropbox to 
them, get your extra 500MB and use that for backing 
up their website. Make sure the backup folder you set 
in the plug-in is also shared with the website owner 
That way the site is backed up on the cloud, your 
system and the owner's system. For no additional 
cost, this is a valuable additional service you can offer. 
As well as changing the frequency, date and time of 
your backup, you can optionally exclude any files and 


directories that you don't want to be backed up. 


CONTACTS AND 
LOSE THESPAM 


Fast Secure Contact Form 


wordpress.org/plugins/si-contact-form 


jontact forms in WordPress can be quite fiddly 
to configure, but Fast Secure Contact Form is 
easy to use and very customisable. 

Most websites will attract their fair share of 
contact form spam, so choosing a contact form 
solution that helps you prevent this at source will 
help to keep your inbox free from this extra burden. 

This plug-in comes with CAPTCHA and Akismet 
options, and the former works perfectly well. While 
Akismet frequently appears in lists of top ten popular 
plug-ins (possibly as it comes loaded with the 
standard WordPress install), it is worth pointing out 
that the service is only free for personal use. Use the 
service for more than one commercial website and 
you will need to pay $50 per month 

With Fast Secure Contact Form you can have as 
many different forms as you wish, and there are 
many optional extra fields that can help you to 
ensure your forms are as user-friendly as possible, 
capture the user input correctly and are styled to 
match the look and feel of your site. 

Incidentally, there is a sister plug-in ‘SI CAPTCHA 
Anti-Spam’ which provides spam blocking for 
comments, registration forms, lost passwords and 
login forms. 


CREATE 
SOPHISTICATED 
PAGE LAYOUTS 
EFFORTLESSLY 


Visual Composer 


demo.wpbakery.com/vc 


his plug-in costs $25, but it boasts a truly 

impressive feature set. Visual Composer is a 

drag-and-drop page builder. Once installed, 
you'll need to configure which options are available 
to which category of users and which content types 
may be used with Visual Composer. Once that's done, 
you'll notice a new Visual Composer button above 
the editor window in your page or post or other 
custom content type (assuming you remembered to 
select that content type in the settings). 

Launching Visual Composer lets you select new 
rows in nine different column width combinations 
add elements to drop into the columns within those 
rows, load templates based on previous ones or save 
templates for future use with other pages. You can 
currently select between 28 element types: 18 
content, five social and three ‘structural’ ones. 

The interface is well executed, as are the elements 
that are generated, and it's easy to override the CSS 
of these elements if further customisation is needed 

There is an argument that many of these layouts 
could be done (better) using CSS and HTML with no 
need for a plug-in, but Visual Composer has been so 
well thought out and put together that it’s not so easy 
to agree that they could be done better that way. 

Visual Composer is a real time-saver and when it 
enables you to create richer, more interesting pages 
that stand out from everyone else's, does it really 
matter how they came into being? 


UberMenu | 23 | WordPress Mega Menu Plugin 


Demo Controls 


Transition 


Top-Level Descriptions 
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Got even more sking 


UberMenu Features 


UberMenu is a y, highly cus 


ardPress plugin. It works out c 


New Features in UberMenu 2. 
Now fully responsive! 
LUghter weight, more etticient 
Prone & iPad compatibio! 
Full-width submenu option with abiit 


Easy to Use 
Works out of the b 


Integrates directly with the WordPress 3 Menu Management System 
work m that you know and lovet 


Rapidly de 


B A drag-and-drop interface allows users to quickly create complex layouts 


WOW YOUR 
VISITORS WITHA 
MEGA MENU 


UberMenu 


wpmegamenu.com 


berMenu is one of the bestselling premium 
WordPress plug-ins of all time, and for good 
reason. $16 buys you a menu system that 


Must Have Plugin for WordPress 


Ten thousand people can not be 


See how easy 
itis 


ng. 


Æ Visual Composer breaks down the page elements, making it easy to drag a new element into a layout 


knocks the spots off the (already quite good) 
WordPress 3 Menu Management System 

You'll want to be able to fully customise the 
look and feel of the menu, obviously, and choose 
from over 20 preset styles. That’s nice 

But what if you could also put some funky 
graphics and description text into the menu to 
aid navigation and add a bit of pizzazz? That 
would be cool. 

But wait. With UberMenu you can add widgets 
to your menu - which means blog posts, maps, 
contact forms, if you want - so you can 
effectively turn a menu item into a highly 
aesthetic, user-friendly and functional page in its 
own right. Now that’s Mega! 

Underpinning UberMenu is some pretty smart 
code that delivers its functionality efficiently and 
with as much compatibility as possible. As a 
premium plug-in, if you do need support you can 
be fairly sure of a responsive and helpful reply. 

The developers are very upfront about how it 
works in different environments, who might 
expect problems etc, and they are not at all 
apologetic about not supporting Internet 
Explorer 6. Hurrah to that. iPhones and iPads 
are compatible. 

UberMenu might not be for everyone. Or at 
least you might find yourself hoping that - 
because the fewer users there are out there, the 
more Mega your menu will be. 

Visit the UberMenu demo site to experience 
the Mega-ness yourself 
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MAKE EVERY POST 
MORE EFFECTIVE 
WITH SOCIALLY 
SAVVY AUTHOR 
BOXES 


Fanciest Author Box 


fanciestauthorbox.com 


uthor boxes are great for engaging with your 
site visitors. The latter can see who you are 
and read a little about you 

But why stop there? $10 can buy you Fanciest 
Author Box - from amusingly named developers, 
ThematoSoup - and will take your site’s author boxes 
to the next level. 

The visitors to your website are most likely to be 
interested in the author while reading their post, so 
why not put links to your social sites right there in 
front of them? Your visitors will be able to read your 
Twitter tweets, see a summary of your latest posts 
and even hook up with you on Facebook, Google+ and 
LinkedIn - all by switching between the neat tabbed 
boxes that appear at the top of the author box thanks 
to this clever plug-in. 

If you're looking for a cost-effective way of making 
more connections and keeping your visitors more 
connected, you should definitely give Fanciest Author 
Box a look 

The plug-in is very easy to configure and you can 
easily customise where and how the box appears for 


posts, pages and custom post types. 


Username 


Plugin Directory 


Extending WordPress 
Plugi 

Themes 

Mobile 


ideas 


W Twitter f Facebook 


Slobodan Manic 
Developer at ThematoSoup 


TE Google+ [f Linkedin 


E] Latest Posts 


| love working with WordPress and doing it the right way. Themes and 
plugins | develop have a common #1 goal: Keeping it as simple as possible 


for users to publish their content. 


E Author boxes add personality and presence to a post, as well as social media connections 


“Visitors will be able to 
read your Twitter 
tweets, see a summary 
of your latest posts 
and even hook up 
with you on Facebook” 


Fanciest Author Box fully supports multi-author 
blogs and Google authorship verification. 

Guest blogging is a great way to increase the 
exposure of your site and this plug-in will help you 
provide the red carpet treatment for guest bloggers. 


Log in | iorgor?) or Register 


nen WordPress Backup to Dropbox 


Search Plugins 


Keep your valuable WordPress website, its media and database 
Popular backed up to Dropbox in minutes with this sleek, easy to use plugin. 


Tags 


widget (3,827) 

Pe 20) 

plugin (2,308) 
is backed up on a regular basis. 

admin (1,914) 

posts (1,829) 

sidebar (1,569) 


Dropbox! 


twitter (1,30 


WordPress Backup to Dropbox has been created to give you peace of mind that your blog 


Just choose a day, time and how often you wish yor backup to be performed and kick back 
and wait for your websites files and a SQL dump of its database to be dropped in your 


Download Version 1.5.5 


Description Installation FAQ Screenshots Changelog Stats Support Reviews Developers 


Requires: 3.0 or higher 
Compatible up to: 3.5.2 
Last Updated: 2013-625 
Downloads: 497,677 


Ratings 


INSTALLING AND 
ACTIVATING A PLUG-IN 


@ You can automatically install plug-ins from 
the WordPress Plugin Directory, which is the 
normal method for free plug-ins. With a 
premium plug-in, you will download it first and 
then you can upload the .zip file - Install 
Plugins>Add New page (Upload). 

Some due diligence is recommended before 
installing any plug-in (for example, by 
checking reviews and forum comments) and 
preferably you should try it out first on a clone 
of the site in a test environment. Seemingly 
benign plug-ins can cause apparently 
unrelated and unexpected problems. 

Once you've uploaded the plug-in, you'll 
return to the Installed Plugins page and select 
Activate. Many plug-ins have settings that 
need to be configured and these are accessed 
from either a link on the Installed Plugins page 
or through a new menu item on the left-hand 
side if the plug-in has created one. 

There are several good reasons for not 
running unnecessary plug-ins on your site and 
if you do run into problems you will inevitably 
find yourself ‘doing the plug-in dance’ where 
you will have to selectively deactivate some or 
all of the plug-ins to diagnose the problem. 
You don't want to find yourself attempting to 
perform that dance with too many partners. 


$ Install Plugins 
Saaren | Seah Resta | Upon! | Feared 1 Popa | Newent | Ferrin 
Komori 3 [i 

Name 


WP Deters 
Javascripts 


googie (1,304) You can set where you want your backup stored within Dropbox and on your server as well 


ota (1,290) as choose what files or directories, if any, you wish to exclude from the backup. 


Images (1,244) 
rs d ‘The plugin uses OAuth so your Dropbox account details are not stored for the plugin to gain 
access. 


Kontot Developer 1.02 
at 


Dotare instal Now 


E WordPress Backup to Dropbox enables you to automate cloud storage for all of your clients’ sites 
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DRAG-AND-DROP 
FORM BUILDER 
-NO, REALLY 


Quform 


www.quform.com 


your site to the next level and standing out from 
the crowd, you might be forgiven for asking what 
place a form builder has in the line-up - especially as 
we included the free form plug-in Fast Secure 
Contact Forms earlier. Not exactly sexy is it? 
However, you may be surprised to learn that 
Quform is the fifth bestselling plug-in at Code 
Canyon. So why does a form builder sell in such 
numbers? Most people don't like forms; they don’t 
like to complete them, build them or even read about 
them. However, if you can build a better form you will 
get a better response. 
Consider this scenario, Let's say you're a website 
designer and you want to encourage ii 
your services through your wel 


te plug-ins are supposed to be about taking 


might find it’s wat long before Quforn 
- many times over. 


‘Bray and drop for 


(Quart rable excustely on Coren 


Œ Build forms in double-quick time 


“Quform is very well 
done and will help you 
achieve your goals, 
providing a form that 
people dont mind 
having to fill in” 


ries about 
ar 


live and manual ; support for any WordPress issue. 

Apparently it’s like having your own personal 
WordPress development team. WPMU DEV claims to 
have 157,721 members and to have been ‘kicking it 
since 2004’. 

The firm majors on manuals and documentation 
and even produces white-label videos that you can 
use yourself or share with your clients without 
fessing up that you didn't make it just for them. 

You can also cancel your membership and 
continue to use the plug-ins and themes but without 
the support, upgrades etc. 

WPMU DEV's FAQ says: ‘Um, isn’t this too good to 
be true? We thought you might ask that :) We can do 
this because we are the largest plug-in provider on 
the web, have the most members and consistently 
invest membership fees in improving the business. 
So it's 100% true, we're the real deal!’ 

As with any large organisation, WPMU DEV has its 
share of raving fans and vocal opponents. It’s always 
advisable to do some research of your own before 
buying any plug-in or service, to ensure it meets your 
needs and you get value for money. 


Tips 


“There's a WPMU DEV plugin for 
everything my clients can dream up” 


hulle Freeman, Sistak Creative Technologies, WPMU DEV Member 


wpmu 


your own. After all, Wo dP! 
developed deliberately to « 
functionality to be exten 
If you want your plug-i 


the appropriate licence. 

The WordPress Codex provides an excellent 
introduction to the subject: codex.wordpress, 
org/Writing_a_Plugin. 

By offering your plug-in through the 
WordPress Plugin Repository you will be 
providing it for free and you will undoubtedly 
earn much kudos for that. 

Assuming your plug-in is popular, you are 
also likely to receive plenty of support requests 
and it’s sometimes easy for users to forget that 
you've made it for free. However good your 
plug-in and support is, you'll probably find 
yourself reading “Your plug-in sucks, you suck, 
you've ruined my website and | hate you”. 

No, you shouldn't let this put you off, but 
don't be surprised if it happens. 

Try releasing a premium plug-in that sells for 
$10 and experience how much greater is the 
support expectation. 
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A premium theme will list 
compatible browsers. 
providing peace of mind 
and freedom from extended 
periods of testing. You will 
also have access to bug 
fixes and new features as 
they are released. 


Elite developers pro-actively 
research the market for the 
most demanded features to 
increase the marketability of 
their themes and the most 
popular themes tend to be 
rich with these features 


Sliders Headers Pages Portfolio Blog Features Shortcodes 


(ee 


Avada is incredibly responsive, withla refreshingly clean design 


And it has some awesome features, premium sides, united colors, advanced theme options and so much more! 


It's 2013 and you can rightly 
expect your premium theme 
to look great ona desktop or 
laptop, a tablet anda 
smartphone. Watch out for an hie 
increasing number of ‘retina 
ready’ themes. 


oO Responsive Design (<} Awesome Sliders 


Learn More > 


© vntimited colors 


Leam More > 


(x) 500+ Google Fonts 


Learn More > 


Many themes come bundled 
with plugins, especially 
sliders, which bought 
separately, would cost more 
than the theme itself. This 
makes some premium 
themes incredible value for 
money. 


Why Avada? 


Style Selector 


You should be able to 
customise the colour and 
typography used 
throughout the site 
through a user-friendly 
admin panel. You'll 
probably enjoy a number 
of layout options as well 


= k Ml 


The best themes should 
provide template files, 
demo content, great 
documentation (often 
supplemented by video 
tutorials), helpful 
support and a useful 
forum to boot. 


ANATOMY OF A PREMIUM THEME 


Some features and benefits of buying a premium WordPress theme 


hoosing a premium WordPress theme can be 

a big decision. Your alternatives are selecting 

a free one, probably from the WordPress 
Themes Directory (wordpress.org/themes), or 
building one yourself (codex.wordpress.org/ 
Theme_Development). 

If you are new to WordPress you may find it helpful 
to review the above resources first even if you are 
planning to buy a theme, as they will help you to 
make a more informed choice. 

Themeforest.net is the largest WordPress theme 
marketplace, so it’s not a bad place to start your 


HOW TO INSTALL A THEME 


Themesin the 
WordPress Theme 
Directory canbe 
installed by 
selecting Install 
Themes and then 
choosing Search, 
Newest, or Recently 
Updated, as 
required. Once your 
chosen theme is 
found you just need 
to select Install Now 


Downloading a premium 

theme 
When you buy a premium theme you will 
download it in a ZIP format. You should keep 
this safe in case you need to use it again. 


search, but there are other smaller marketplaces and 
many developers selling their themes directly. 
Premium themes tend to have Live Previews that 
you should spend a good amount of time perusing. 
It’s often not possible to access a theme's support 
forum without first buying a theme, but you should 
try to find some user reviews and if you have any 
pre-sales questions, send them off to the developer 
How these are responded to will often give youa 
good idea of the developer's approach to support. 
When reading user reviews and setting your 
expectations about developer support, it’s important 


masa nio 


Locating the theme file 

Unzip the file to typically find a folder 
containing a number of other files including 
documentation, template files and the 
theme itself - usually another ZIP file. 


to understand the difference between legitimate 
support requests and customisation requests, When 
things don't work as they should, and are not caused 
by the user, you can reasonably expect the developer 
to help put things right. However, some users will be 
so frustrated by the problem they are experiencing 
that they'll post negative comments even if they have 
inadvertently caused the problem themselves. They 
may also expect to be able to make changes to the 
functionality of the theme (and receive free help with 
that) which fall outside of the scope of the built-in 
customisation options. 


B | Manage Themes 


Install Themes 
Search | Upload | Featured | Newest | Recently Updated 
Search for themes by keyword. 


Upload and activate the 
theme 
In WordPress, select Appearance>Themes> 
Install Themes>Upload. Select Choose File, 
select the theme file and hit Install Now. 
Select Activate to view the theme live. 


A HEALTHY WEBSITE IN SAFE HANDS 


Given all the time and effort that you're likely to put in to your website, it really doesn’t make sense to 
scrimp on the things that could have the biggest impact on it 


CHEAP HOSTING 
WILL CATCH YOU 
OUT AT SOME POINT 


With hosting, you get what you 
pay for. Approach with caution 
W How cheap are chickens in the supermarket? 
Almost certainly too cheap: it’s not good for the 
chicken's welfare, and it’s probably not good for us, 
but we've allowed this to happen by continuing to 
buy cheap chickens. 

When a host wants to make more money (and who 
doesn’t?), they can lower their prices and attract 
more websites. Sometimes they try to cram in as 
many websites as possible and inevitably at some 
point your website performance will suffer, often as a 
result of demand for another website on your server, 
sometimes because the server itself needs 
maintenance or just collapses under its own weight. 

You really need to demand a higher standard of 
welfare for your own website if it is to remaining 
healthy in the long term. Even premium hosting is not 
that expensive now. Cloud hosting is a great way of 
avoiding downtime through individual server 
outages, or surges in demand, as your site normally 
lives on several servers and the cloud dynamically 
serves the most appropriate version of the files 
requested at the time they are needed. 

If possible you should pick a host that specialises 
in WordPress hosting. At the moment in the UK there 
are no dedicated WordPress hosts (although it surely 
can't be long before that changes), but you certainly 
want to find out what type of services they offer, like 
one-click installation. Finally, if rapid, reliable support 
is important, you really need to do your research. 


Server requirements 


+ (Qptionalequired for MutiSite) A 


‘© module (lor clean URs known as Pera 
Recommended setup 
tis recommended you use a robust platform comprised of the Linux operating system, and either the A; 


web server. Almost any server that supports PHP and MySQL will work. your host doesn’ sup. 


sand ©, you wil probably be better of switching to one of the many that a 


A is aiso essential that your host allows remote connections, for many of the WordPress features to wor 
HTTP connections, many parts of the WordPress wil not function. 


E When purchasing hosting, do your research first 


“You should pick a 
host that specialises in 
WordPress hosting, 
and find out what 
services they offer” 


Vidahost is technically-led and our staff are 
‘techies’. If you have a problem, you'll be talking to 
someone in the UK who will try to help, rather than 
to a support-robot in a call-centre reading from a 


script. 


Home Page Sha 


ler Hos 


d Hos! 


Serv 


red Hosting 


SSL Certificates 


Full Site: 


Hosted 4 


My.Vidahost 

Support Tickets 
My | 
Ma 


Forums 


ces 


Profile 


Service Updates 


E Picking the right web host is extremely important, WordPress users will need to look for Linux web hosting 


IS YOUR SERVER FIT 
FOR PURPOSE? 


Just follow the recommended 
advice and all will be fine 


W Sometimes online you'll read comments like “I'ma 
Windows user, | know how Windows works, so | want 
my website to run on a web server that’s running 
Windows because it will work better/ mean | 
understand it.” You probably know that's tosh. 

While it's possible to run WordPress on a Windows 
server, it’s definitely not recommended. 

Check this page for what the WordPress.org Codex 
has to say on the matter: codex.wordpress.org/ 
Hosting_WordPress. They make a clear 
recommendation to use a Linux operating system 
with either Apache web server or NGINX web server, 
so it's best to follow that advice. 

When you first start setting up your WordPress 
website, you'll probably want to set up pretty 
permalinks (codex.wordpress.org/Using_ 
Permalinks) which mean your URLs will be neat and 
tidy, based on your page titles. If when you come to 
activate pretty permalinks your site breaks, it will be 
because the server isn't supporting it. With the 
Apache web server, the mod_rewrite module needs 
to be enabled. If your host doesn’t support this, 
switch to a host that does. 


TESTING TIMES 

If pushing out the WordPress 
envelope, you should probably 
take a regular pulse check 


W Checking every aspect of your WordPress site is 
the only way you can be sure everything is okay. 

If you are developing your own theme, the Codex 
recommends that you complete an eight-point 
Theme Testing Process (bit.ly/94mGof). 

If you're buying a premium theme, you can put the 
Live Preview through the W3C Markup Validation 
Service - validator.w3.org. This can throw up errors 
that really won't cause you or your users any 
problems, but there’s no harm in speaking to the 
developer and getting their feedback. 

You may like to run speed tests on your site and 
compare its performance against others. Google's 
Page Speed tool (https://developers.google.com/ 
speed/pagespeed/) offers practical advice on 
speeding up the performance, as does Yahoo with its 
Yslow browser plug-in (yslow.org). 

Within WordPress, the Plugin Performance Profiler 
(wordpress.org/extend/plugins/p3-profiler/) will 
measure the performance of your plug-ins. 

Finally, even with a thorough page-by-page check 
of your site, you may well overlook an error. So, it’s 
always a good idea to get others to take a look at it. 


ESSENTIAL ‘ 
TOOLS FOR 
A MODERN 
FRONT-END 
DEVELOPER 


> 


As the web matures, so does the necessity 
for modern tools, frameworks and applications. 
Ever wondered what the pros use in their 
day-to-day workflows? 


hen you think about it, the phrase ‘modern front-end 
development is a relatively new thing. When compared 
to competing platforms and industries, the web is still in 
its infancy stage. That being said, one only needs to read a 
development-specific Twitter feed, or say hello on a few applicable 
IRC channels to realise just how quickly our techniques and processes are 
advancing into a modern age of front-end development. 
It's fun to reminisce back to the days, not too long ago, when the process 
of building a simple website involved little more than a text editor and a bit 
of HTML and CSS understanding. Not a fan of Internet Explorer 7? Well back 
then, in the late Nineties, we were wrangling Internet Explorer 3 into shape! 
Though the ecosystem wasn't nearly as mature as it is today, the process was 
simpler. Hand-code some HTML (in all caps, of course), add a touch of inline 
CSS, insert your favourite animated GIF and you're done! Upload that bad- 
boy to Geocities and wait for the traffic to come rolling in! 
Ah, those were the days. Thankfully, though, the web has matured 
immensely since then. In fact, as a community, we've agreed upon a 


plethora of best practices and tooling. We use version control to collaborate 
on open source projects. We embrace test-driven development for 
JavaScript (using tools like Mocha and Jasmine). We prevent ‘reinvent the 
wheel-itus, by instead harnessing our efforts into contributing to highly 
tested libraries, such as jQuery. We've broken free from untestable spaghetti 
code by evangelising the necessity for dedicated frameworks, such as 
Backbone and Ember. We've even applied the principles of object-oriented 
programming to our CSS (OOCSS)! Yes, ladies and gentlemen, it's a very 
good time to be a front-end developer! 

While all of this may seem overwhelming at first (don't worry, it should; 
we've all felt that way at one point or another), all of the items listed above are 
prerequisites for building modern, cross-browser web applications. The only 
question is: in an ocean of tools, libraries, and frameworks, which ones should 
you use? Or, put more directly, how do you separate the abandonware from the 
cream of the crop? This article will provide a somewhat opinionated stance on 
what tools you should be using, along with a few alternatives for each category. 
So let's get started with those essential tools... 
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EDITORS 


Let's put it this way: if you don't know the 
ins and outs of your code editor, then you're 

doing it wrong. If you hold a position that virtually 

mandates eight hours a day of work within one 

be honest, it's 


code editor (let's jay More than that) 


shouldn't you dedicate the necessary resources 
to optimise your workflow as much as possible? 
Even a five-second reduction to a task in your daily 
workflow can add up to a significant time saving 
the course of a year 
If you've rested stagnantly on your laurels in the 
same editor for the last decade, perhaps it's time to 


consider some alternatives 


SUBLIME TEXT 3 


www.sublimetext.com/3 
Even a few years ago, yout struggle to find a developer who 
knew what Sublime Text was. Fastforward to today and it's 
easily the most evangelised code editor in our industry. The 
reason why is obvious; while competing editors, such as. 
TextMate and Coda, have either fallen by the wayside or 
disappointed their user base with underwhelming updates, 
the Sublime Text team (consisting of one person, believe it or 
not) focuses the bulk of its efforts on the most important 
aspect of your development workflow: speed. And, boy oh 
boy is Sublime fast. With a simple keystroke, you'll find 
yourself switching from file to file with such ease and finesse, 
to the point that you'll cringe at the thought of manually 
browsing through a file tree, like your former self once did. 

As with most things in life, there's a reason for Sublime’s 
popularity. Though not free, it's the best code editor 
available today. Period. 


LIGHTTABLE 


wwwlighttable.co 


@ Could LightTable surpass Sublime Text? We'll see 


If Sublime Text offers the pinnacle traditional code editor, 
then LightTable hopes to completely revolutionise the 
coding experience. While it's still very much in an alpha 
state, the progress so far has been incredibly promising. 
Imagine having the ability to evaluate your JavaScript in 
real time, without ever leaving the editor. This level of 
real-time feedback is unprecedented. Combine the speed 
and configurability of Vim with the elegance that we've 
come to expect from modern apps; LightTable offers this 
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and more. Could it surpass SublimeText? We! 
have.towait’and see! Until then ke ielose eye 
on this one! r 


WEBSTORM 


www.jetbrains.com/webstorm 


WebStorm — The smartest JavaScript IDE 


=. 
W if you prefer a full IDE, WebStorm is well worth a look 


While there's certainly been a movement away from full 
IDEs in recent years, nonetheless many continue to 
champion their benefits. Luckily, there's a variety of options 
to choose from! Most notably, the JetBrains team has been 
doing a wonderful job in recent years of maintaining a 
variety of platform-specific IDEs, including WebStorm, 
PHPStorm, and RubyMine. 

If you're one who prefers such an IDE, place 
JetBrains’ offering at the top of your ‘to review’ list. You 
won't be disappointed. 


VIM 


www.vim.org 


W Vim is a notoriously difficult editor to use 


You might be thinking to yourself, “Why would Vim be 
included ina list of modern tools?” While Vim, or originally Vi, 
has, indeed, been around for decades, the truth is that its very 
much a modern editor that remains in active development. 

In terms of sheer extendability and speed, it’s difficult to top 
Vim. Keep in mind, though, that if you do give it a chance, you 
should plan on months of training. It's a notoriously difficult 
editor to use. However, once you do commit those 
keybindings to memory, you'll be unstoppable. 


BRACKETS 


brackets.io 
Brackets is unique in that it's an open source code editor 
developed by Adobe that takes HTML, CSS and JavaScript 
to the extreme: it's built with those very technologies! As a 
result, as long as you have a relatively basic understanding 
of JavaScript, you already have the necessary tools to 
extend the editor as you see fit. Frontend developers are 
doing this very thing every day, in fact. 

Though it’s still in need of some polish, Brackets is 
very much in active development. Expect to see this one 
give Sublime Text a run for its money this year! 


JAVASCRIPT 
FRAMEWORKS 


As the industry continues to evol re beginning 


to see widespread adoption of a new methodology 
iding highly responsive experiences on the 

or single-page web applications. While, in 
the past, an effort this ambitious would have 
required an overwhelming amount of code, luckily. 
thanks to various frame 


rks, the process is easier 


than it’s ever been! The following tools will 


jump-start your process 


BACKBONE 


hackbonejs.org 
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E Backbone provides structure for sloppy spaghetti jQuery code! 


Currently the reigning champ of JavaScript frameworks 
(at least, in terms of popularity), Backbone provides 
structure for your sloppy spaghetti jQuery code! 

Though it may require a bit of rethinking, when it comes to 
your understanding of a client-side MVC (or MV") framework 
(especially, if you're coming from a server-side framework, such 
as Rails or Laravel), once you fully grasp the essentials you'll 
find yourself writing clean, modular, downright elegant code. 

Hoping for a crash-course in Backbone? Check 
out Tuts+ Premium and CodeSchool; they'll have you 
prepped in record time. 


EMBER.JS 


A framework for creating 
ambitious web applications. 


E If Backbone doesn't quite fit the bill, move up to Ember 


Ember is the spiritual successor to SproutCore, a 
powerful open source JavaScript framework that 
attempted to port Apple's Cocoa user interface to the 
web. The reason for the name change stems from 
the fact that the code base was completely rewritten 
from scratch, in an attempt to break away froma 


considerable amount of legacy code and some ‘faulty’ 
ways of thinking. 

As the Ember team puts it, the success of Backbone 
proved to them that the development community 
indeed wanted the ability to build responsive, client- 
side apps. However, they also had years of experience 
crafting custom Uls with HTML and CSS. SproutCore's 
attempt to replace this, in favour of its Cocoa-like UI, 
wasn't the correct path. 

From this failure came Ember, a new framework that's 
sparking its way through the development community at 
record speeds. If Backbone doesn't quite fit the bill then 
move up to Ember. 


ANGULARJS 


angularjs.org 
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E Angular extends HTML to manage dynamic views 


Angular, developed and backed by Google, takes a 
different path, by providing the necessary tools you to 
extend HTML's vocabulary for your applications, as 
needed. While some feel that this sort of data binding 
makes for messy, non-separated code, others champion 
its flexibility and ease of development. 

As the Angular team puts it, HTML was not designed 
to manage dynamic views. Angular fills in this glaring 
gap. What's your opinion? 


KNOCKOUTJS 


knockoutjs.com 
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W Keep code to a minimum with Knockout 


One of the original modern JavaScript frameworks, 
Knockout - which preceded Angular, too - advocates a 
data-binding approach for building responsive 
applications with a minimal amount of code. 

While, again, countless developers have argued against 
this approach, there's no denying that it has its merits. What 
may require hundreds of lines of code in Backbone can be 


accomplished with but a few dozen in Knockout. 
The only question is: can you sleep at night, with all 
of that data binding in your HTML? There's no correct 
answer to this question. Only preference, 


METEOR 


meteor.com 


PREPROCESSORS 


For years, the front-end community 
debated over whether CSS preprocessing we 
necessary. The language is a simple one; why are we 
complicating it? Thankfully, over time, and as the web 
stack matured, the majority of front-end developers 


came to terms with the fact that, until the language 


itself matures a bit more, preprocessing is a necessity 
for all but the most trivial of websites. Don't worry: 

many of these preprocessor conveniences are slowly 
but surely working their way into the language. These 


things simply take time. 


SASS 


1 Imagine writing your entire application in nothing but JavaScript 


Meteor is a new full-stack JavaScript, powered by Nodejs. 
It will revolutionise the way that you approach writing 
highly responsive and dynamic web applications. 
Imagine writing your entire application in nothing but 
JavaScript; not just the client-side, but the persistence 
layer as well! With every single API offered in one 
language, imagine the convenience and flexibility that 
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Download 


this could provide! W Sass makes CSS fun again 


While the framework has not yet reached version 10, as 
long as development remains active you should absolutely 
investigate this new approach to writing applications. 


MOCHA 


visionmedia.github.com/mocha 
= 


As its website so boldly declares, Sass makes CSS fun 
again. Variables, nesting, mixins... Sass has it all. More 
importantly, if your goal is to learn the most popular 
preprocessor available, as well as various frameworks built 
on top of it, such as Compass, Sass should be your choice. 

Sass can even mould itself to fit your needs. If the 
indent-specific style of the original sass syntax feels 
foreign to you, then simply switch to the alternate .scss 
format, and continue writing your stylesheets in the 
same fashion that you've done for years. 

Chances are, if you join a development team in the 
near future, Sass will be their preprocessor of choice, and 
the one that you will be asked to learn. 


LESS 


lessess.org 
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WŒ Mocha was built by the same person whois behind Stylus and the 
Express framework: TJ Holowaychuk 
As noted earlier, the front-end world has matured 
immensely in the last half-decade. At one point, the 
community cringed at the though of writing even a 
single line of JavaScript. Fast-forward to today and not 
only is there a seemingly endless wave of JavaScript 
libraries and frameworks, but testing (and even the TDD 
pattern) has pushed to the front and centre 

While there are a variety of test frameworks to choose 
from, including Jasmine and QUnit, in this author's 
opinion you should experiment first with Mocha, which 
was created by the same person who is behind Stylus 
and the Express framework: TJ Holowaychuk. 


W Traditionally, LESS has appealed more to web designers than Sass 


Mostly, you'll find that the three most popular CSS 
preprocessors - Sass, LESS and Stylus - are more or less 
the same. Only moderate syntax differences separate the 
three. In the past, LESS has been the more approachable 
option for web designers, as it offers a readable CSS-like 
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syntax (something that Sass did not originally offer). As an 
added bonus, one only needs to import a single JavaScript 
file to enjoy the flexibility of dynamic stylesheets. 


STYLUS 


learnboost.github.com/stylus 


W Configurability at its best 


A relative newcomer to the scene, Stylus perhaps offers 
the most flexibility of all three preprocessors in this list. 
Prefer semicolons? Keep them. Hate using colons to 
separate properties and values? Remove them! The key 
is in the fact that Stylus provides you with the ability to 
customise your stylesheets how you see fit. 
Configurability at its best! 

The only downside (and a significant one, at that) is 
that, due to its age, it's more than likely that members on 
your development team - or community contributors if 
you happen to be developing an open source application 
- will likely not yet be familiar with Stylus. 


COFFEESCRIPT 


coffeescript.org 


W CoffeeScript makes JavaScript manageable 


CoffeeScript, as many might put it, makes JavaScript 
manageable. It begins by removing the ugly bits. 
Semicolons? Gone. Braces? Those are stripped too. 
Parentheses? Let's make them optional. It then provides a 
number of features, which, for all intents and purposes, 
translates to syntactic sugar. Lexical scope. splats. array 
comprehension - CoffeeScript offers it all, while ultimately 
compiling down to vanilla JavaScript. 

Thanks to increased adoption and improvements to 
source maps, many of the downsides to using such a 
preprocessor are rapidly becoming non-issues. If you 
question the need for yet another preprocessor, never 
fear; like Sass, many of CoffeeScript's innovations will be 
implemented into future versions of ECMAScript. 
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TYPESCRIPT 


www.typescriptlang.org 


WE TypeScript allows you to continue writing in a dialect of 
JavaScript, while embracing the latest additions to ECMAScript 6 
For those who can't quite connect with CoffeeScript's 
Ruby-like syntax, TypeScript is an excellent alternative, It 
allows you to continue writing in a dialect of JavaScript, 
while embracing the latest additions to ECMAScript 6. 
Similar to CoffeeScript, ultimately, your code compiles 
down to simple JavaScript that can run in the browser. 


CODEKIT 


incident57.com/codekit 

CodeKit, created by the perennially funny Bryan Jones, 
exploded onto the front-end world in 2012 and is now used 
by such sites as BarackObama.com and Engadget. Like 
steroids for web developers, it merges various compilers, 
minifiers and optimisations into one beautiful Mac 
application. If the Terminal feels like a black box to you, 
limiting your ability to embrace and harness the previously 
mentioned preprocessors, then Codekit is your solution. 


LIVERELOAD 


livereload.com 
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W LiveReload is available for both Mac and Windows 


LiveReload is quite similar to Codekit. In fact, 
disregarding some UI differences, and a few of Codekit's 
unique features, both apps will equally allow you to get 
from point A to Z. so to speak. 

Like CodekKit, LiveReload allows you to monitor a 
file system for changes, and perform the necessary 
preprocessing and compiling in response. It will also 
auto-update the browser upon saving each file. 

Unlike Codekit, however, LiveReload is available 
for both Mac and Windows. In translation, if you're a 
Windows user, LiveReload is, by default, your only choice. 
Don't worry; it's a good one! 


LIBRARIES 
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JQUERY 


jquery.com 


Œ When it comes to manipulating the DOM, jQuery is still the best 


What is there to note about jQuery that hasn't already 
been said? jQuery made JavaScript approachable and 
sparked a new generation of enthusiastic client-side 
developers. That's perhaps the greatest compliment 
that one could ever pay to a library. While it's certainly 
not the answer to every problem, when it comes to 
manipulating the DOM, there's no better tool. 


UNDERSCORE 


underscorejs.org 
Have you ever felt that JavaScript lacked many obvious 
native functions, such as find, pluck or shuffle? If so, 
you certainly wouldnt be the first. Luckily, the popular 
Underscore library provides this missing functionality. 
Think of it as a utility belt that offers a few dozen helper 
functions that you would otherwise code from scratch, 
like for each new project. 

If you happen to be using Backbone, then you're 
likely already familiar with Underscore, as it's a hard 
dependency of the framework. 


D3 
d3js.org 


WE D3 is a fantastic JavaScript-based data visualization library 


D3 is a fantastic JavaScript-based data visualisation 
library that allows you to bind data to the DOM and then 
make transformations to the document. To learn more, 
refer to D3's GitHub repository for a massive gallery of 
examples for visualising various data sets. 


TOOLS AND 
UTILITIES 


Once you optimise your coding workflow, it quickly 
becomes apparent that additional tooling and 


functionality might be necessary. Such t nclude 


everything from module loaders to test runners. 


REQUIRES 


Tequirejs.org 


Requireds 4 
It is opt 
used in other JavaScript environments, Like Rhino 
ar script loader Like 


1e we compatible 7 
Firefox 2+ compatible v 
Sabah tte ———sannnthlantt 


E RequireJS is easily the most popular module loader available today 


At some point, you'll surely begin to pull away from the 
idea of nesting all of your JavaScript within a single file. 
When this day occurs, you'll quickly come across 
RequireJS, which is a file/module loader. Unfortunately, 
though, switching to a modular approach to writing 
JavaScript is a more difficult process than one might 
hope for. After you understand the concept of AMD, you 
then have to decode the logistics: how do you set up 
RequireJS? What about non-AMD libraries? What about 
dependency management? What about configuration 
and optimisation? True, there is a learning curve involved, 
but it's absolutely worth it. 


TESTEM 


github.com/airportyh/testem 


thd eons two tae Oo 


Œ Testem is a test runner that makes JavaScript unit testing fun! 


One significant barrier to testing is the simple fact that it 
can sometimes take a considerable amount of setup to 
get up and running. The longer it takes, the more likely 
it is that the developer simply won't bother. That's why 
Testem is so fantastic: it makes testing as effortless as 
possible - and, more importantly, fun! 


GRUNT 


gruntjs.com 
At its core, Grunt is a simple task-based command/ine 
tool for building JavaScript applications. Think of it as a 


tool that can execute a variety of small, yet common 
operations. Compilation, minification, test running, 
deployment - each of these can and should be 
automated. With Grunt, lengthy processes such as this 
can be translated into a single command. 


GRUNT 


The JavaScript Task Runner 


Why use a task runner? Why use Grunt? 


E Grunt helps you to automate tasks with minimal effort 


NORMALIZE 


necolas.github.com /normalize.css 


normalize.css 


Amodern, HTMLS-ready 
alternative to CSS resets 
orate. maas rman rt heats more 


orsitety and nine wth modern Wanda MB 
arg ot the ye that nes erring 


EŒ Normalize makes browsers render elements in a consistent way 


We've all experienced it; your website displays 
beautifully in Chrome and Firefox, but then you view it 
inInternet Explorer and come to terms with the fact 
that you'll be dedicating the next several hours to 
cross-browser support. 

Normalize makes all browsers render elements in as 
consistent a fashion as possible. Have you ever 
experienced the annoyance of debugging a three-pixel 
input height inconsistency, from browser to browser? 
With Normalize, you'll never deal with that again! 


HTML5 BOILERPLATE 


html5boilerplate.com 
12 Sn: -~ | 


BOILERPLATE 


HTMLS 


The web's most popular 
front-end template 


W Kick-start your project with HTMLS5 Boilerplate 


HTMLS5 Boilerplate is the product of years and 
years of experience and tinkering, It's the 
ultimate project kick-starter and is used by such 
companies as Google, Microsoft and NASA. The 
best part is that, even if you never fully embrace the 
project, it remains a fantastic resource, if only for copy 
and paste purposes. 


TWITTER BOOTSTRAP 


twitter.github.io/hootstrap 
While the development world often preaches the 


necessity for reusable code, the truth is that when it 
comes to CSS, this advice is more often than not ignored. 
How many times have you found yourself writing the g 
necessary styling for a blog post or message box? If only # 
someone would provide a clean package with these 
reusable components, we could scaffold new 
applications with incredible speed! 
Enter Bootstrap. Developed by the team at Twitter, 
Bootstrap provides a plethora of components and 
classes (both CSS and JavaScript-based) to minimise, 
the amount of boilerplate code that must be written for 
each new project. This includes everything from areset 
stylesheet, to beautiful buttons, to JavaScript-activated 
modal boxes. Particularly for the non-designers among 
you, Bootstrap is a fantastic choice. 


Bootstrap 


W Bootstrap will minimise the amount of boilerplate code that you 
need to write for a new project 


FOUNDATION 4 


foundation.zurb.com 


E The fourth edition of Foundation helps you to create smart code 
while saving a lot of time 


If Twitter Bootstrap doesn't quite tickle your fancy, 

then your second choice should most definitely be 
Foundation 4, by the folks at Zurb. Similar to Bootstrap, 
Foundation offers a flexible grid, JavaScript plug-ins and 
various CSS components for rapid scaffolding. The truth 
is that you can't go wrong with either choice. Ultimately, 
it comes down to one thing: personal 
preference. Which one feels right to you? 


JUMP IN! 


It’s true ur m matures 


does the necessity for continued education 
and experimentation with the latest tools and 
frameworks. But, hey, we signed up for this; no 


fussing allowed! We have the unique opportunity of 


being, in the 


he flagship 
velopment crew in the most revolutionary 


innovation in our his 
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Chances are, if youve been browsing 
the latest JavaScript libraries or CSS 
frameworks, or even just checking 


out demos of cool techniques 
created by other developers, youll 
have seen a link to a page on GitHub 


ncreasingly, if you want to collaborate with other web developers on any kind 
of project, GitHub is where you'llgo. GitHub, at its core, is an online host of Git 
repositories: What's. Git, youask? Git is.a revision controlsystem (also called.a 
source code’management, or Version control system). If you've ever found 
yourself-working’on a site and-had-anumber of folders, each named mysite_ 
version, mysite_version2, and So on, you've inadvertently created your own 
revision.control system, albeit a very. inefficient one. Git.allows you a greater 
degree of control.over those revisions, and greatly. facilitates collaboration 
between different developers (in different locations) Working on the same project. 
Let's look at a few situations where revision control. comes in really handy..Let’s say 
you have.a website, and you want to experiment with a different layout. Because this 
will involve rewriting big.chunks of your CSS, you'd usually have afew options: create 
an-entirely separate copy of the website in a-separate folder, or perhaps comment out 
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all:your-existing layout CSS temporarily. Both of these approaches have significant 
drawbacks: in the first case, you might wind up making changes to other aspects of 
the CSS (say, fonts or colours) in the primary (live).version of your site, which you'd 
lose if you simply copied your alternate layout CSS over the top.of it when you were 
done. In-the'second case, you'd actually.be unable to make.changes to your current 
layout until youwere-done with the new one, since they both live in the same file. 

It only gets worse if you're working on a team: another developer may have. made 
changes to the main CSS file, unbeknown to you, which you'd then accidentally 
squash when you copy in your updated version of the file: Messy. Revision control 
solves these issues and makes it easy to combine different changes made to the 
same files (even when those changes are made in parallel by multiple developers), 
experiment with alternate versions of your code while retaining the ability to switch 
back to the primary version painlessly, and keep a complete log of all the changes. 


Getting started 

Before we can grab a project on GitHub and start 
contributing to it, we'll need to learn a bit about how Git 
works independently of GitHub. 

First things first, that means installing Git. Head over 
to git-scm.com/downloads and follow the instructions 
for your platform of choice. 

For all the examples in this article, we'll be working 
with Git from the command line. On Linux and Mac, 
this will be your built-in terminal application. On 
Windows, use the Git Bash provided by the Git installer. 


Configuring Git 

Before we start, we have a few quick configuration 
steps to go through. Git not only stores a record of the 
changes made to a project, but a record of who made 
those changes. For this to work properly, we first need 
to tell Git who we are. 

Open up your terminal (or the Git Bash program if 
you happen to be using Windows), and run the 
following two commands, using your own name and 
email address: 


Now you're ready to:start using Git! 


Repositories 

A collection of files living ina. directory and managed 
by Git is called a repository, Whenever you're working 
with Git you'll be working in.a repository, whether it's. 
one you've created or one you've copied from GitHub. 
This could.be all the.code for a website, or a particular 
JavaScript library, or anything -you-canthink Of, really, 

Let's create a simple Git repository that we can use 
to learn all of Git's basic commands. 

Create an empty directory, and then navigate to it in 
your terminal, Windows users can right-click on the 
directory and select the Git Bash option to open a new 
Git terminal in that directory. For these examples, we'll 
create a directory called hello_git. 

The most basic Git command, and the one you'll 
likely find yourself using the most often, is: 


This will give-you information about the status of the 
current repository. Go ahead and try it out in the new 
hello_git directory: type git status and hit Enter. 


Whoops! Our new directory isn't a Git repository (yet), 
so Git is: complaining that it ‘can't tell us the status. 
Fortunately, turning our newly-created directory into.a 


Git repository couldn't be easier. Simply type git init and 
press Enter: 


If you're using the Git Bash terminal on Windows, you'll 
now see the word master in parentheses at the end of 
your command prompt. This refers to the current 
branch your repository is on, but don't worry about 
that for now. We are going to discuss branches in more 
detail later on. 

Now that your directory is a Git repository, try 
running git status again, and this time you'll be 
rewarded with a bit more information: 


The key bit there is nothing to commit. This is Git's way 
of telling us that there's nothing new in the directory 
for it to track (in fact, there's nothing at all in the 


directory, but the message would be the same if 
nothing-had-changed). 

The basic unit of change that Git deals with Is a commit. 
Your:basic workflow when working with Git will involve 
making changes to one or more files, then committing 
those.changes to Git: This creates a new commit, with a 
unique identifier that allows you to-access it later on (for 
example, to return your repository.to the state It was in 
at that Commit). 

Let’s create the first commit for our hello_git 
repository. Createa file in the directory with some text 
in. If you're familiar with.command-line editors like Vim 
or nano you'can use those, but otherwise simply create 
afile in your editor of choice and save it inside the 
hello.git directory. 

Let's say we created a file called hello.txt with the 
contents Hello, Git!, Now, when we run git status again, 
it notices our new file and lists it in.a section’called 
Untracked files: 


Tips 


On the last line of code above, Git is informing us that 
there’s nothing to commit, even though we've added 
a new file. This is because Git won't track every file in 
the directory by default: it is up to us to tell it which 
files to track. As the output above states, we are going 
to need to use the git add command in order to tell Git 
to track our file. 

Creating a commit involves two steps: first, stage the 
files you want to commit to the staging area, and 
second, commit them. To stage files for a commit, go 
ahead and use the git add command: 


This produces no output, but you can simply run git 
status again to verify that it worked. Now you'll see the 
hello.txt file in the changes to be committed section. 
Now that the file is staged, we want to commit them. 
Each commit in Git is accompanied by a message 
explaining what changes it contains. To add the 
message, include it in quotes after the -m flag, like so: 


This produces the following output: 


Git provides a brief description of all the changes that 
are contained in this new commit, like how many files 
were.changed, and how many lines of code were 
inserted and deleted. 


At any time in a Git repository, you can see a history 
of all the commits leading up to your current state by 
running the git log command. At the moment, our 
repository only has One commit, so running git log only 
shows us that commit: 


Git uses long alphanumeric strings to uniquely identify. 
each commit, and the one that We've been assigned is 
4f73b989922b0ec6e528209b95cbd99c9f28858e. 
(The hash will be different on your machine.) You can 
see a shortened version of this string (containing only 
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the first few characters) in the output from the git 
commit command 

You can use the git show command to display all the 
changes made in a given commit by providing its 
identifier (the short version works fine here too): 


001 $ git show 4f73b989922b0ec6e528209b95cbd99 
c9F28858e 

002 commit 4f73b989922beec6e528209b95cbd99c9F 
28858e 

Author: Louis Simoneau <louis@flippa.com> 
Date: Sat Jul 14 13:57:02 2012 +1000 


initial commit, added the hello. txt 


file 

diff --git a/hello.txt b/hello. txt 
new file mode 100644 

index 0000000. .670a245 

=-=- /dev/null 

+++ b/hello. txt 

ee -0,0 +1 @ 

3 +Hello, Git! 


Lines preceded with a plus symbol (+) were added in 
this commit. Lines preceded by a minus () were deleted 
(our example commit only has one line added, and 
none removed). If you make changes to a line, Git will 
show you the old version of the line as deleted and the 
new version as added, so you can easily compare both 
versions to see the changes. 

That's all there is to committing changes to a Git 
repository; we edit some files, add them to the staging 
area with git add <filename>, then commit them with git 
commit -m “<commit message>”. At any time, you can 
review the history of changes with git log, or review the 
changes in a specific commit with git show <commit>. 


Branching and merging 
So far we've only seen the simplest features of Git: 
adding files to a repository and committing changes. If 


Using git init to initialise a repository and git status to check its status 
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that’s all Git was capable of, it probably wouldn't be 
worth using. Now it’s time to look at Git's real killer 
features: branching and merging. 

Git branches allow you to have several versions of 
your project side-by-side. For example, if you're working 
on an experimental feature, you can do all that work on 
a branch. If you discover a bug in your application that 
needs fixing urgently, you can simply save your work 
on the experimental branch by committing it, switch 
back to the main branch, commit your fixes there, and 
deploy the fixed code. When you switch back to your 
experimental branch, all your work will still be there, 

When you're done with your new feature, you merge 
that branch into the main branch. Git will automatically 
combine the changes made on each branch for you. If 
there are conflicts - if. for example, you made different 
changes to the same line of the same file in both 
branches - you can pick which change to keep. 

As we noticed earlier, our Git repository is currently 
on the master branch: this is the default primary branch 
for any repository. To switch between branches, use git 
checkout, followed by the name of the branch you want 
to check out. Let's make a new branch in the hello_git 
repository by passing the -b flag to git checkout: 


$ git checkout -b test_branch 
Switched to a new branch ‘test_branch’ 


Love the 
command line 


While there are some great 
graphical programs for 
working with Git repositories, 
you'll get a much better 
understanding of how to use 
Git effectively if you learn it 
on the command line. 


The new branch will inherit all the commits of the 
branch you're on up to this point. Think of it like a real 
branch on a tree, where the bottom of the trunk is 
the first commit. The new branch will have all the 
history down to the bottom of the tree, but any new 
commits on the master branch (known as the trunk) 
won't be visible on the branch, and vice versa. So if you 
type git log at this point, you'll still be able to see your 
initial commit. 

To verify that you're on the new branch, you can 
either type git status again, or use the git branch 
command. git branch will give you a list of all the 
branches of your repository: 


$ git branch 
master 
* test_branch 


Now let's make some changes on our new branch. 
Create a new file, called goodbye.txt, with a line of text 
in it, and commit it 


$ git add goodbye. txt 
$ git commit -m “add goodbye message” 
[test_branch 1e1285e] add goodbye message 
1 files changed, 1 insertions(+), @ 
deletions(-) 
@05 create mode 100644 goodbye. txt 


Verify that your new commit is there using git log, then 
switch back to master by typing; 


001 git checkout master 


At this point, if you inspect the directory, you'll note that 
goodbye.txt is nowhere to be found. That's normal: it's 
tucked away on the test_branch branch. If you want, 
you can switch back and forth from master to test_ 
branch to see the file appear and disappear. The same 
thing would be happening to the contents of your files 
if you had changes to them on a branch. When you 
check out a branch, the files on disk will be changed to 
match the latest commit on that branch 

Let's say we're satisfied with the new feature on test_ 
branch, and we want to incorporate it into the project. 
We want to merge test_branch into the master branch 
Make sure you have master checked out, then type: 


001 git merge test_branch 


Now all your changes to test_branch will be brought 
into master. You can verify this is the case with git log: 


aai $ git log 
002 commit 1e1285e896491b7757987f091682a17613d 
5f74d 
Author: Louis Simoneau <louis@flippa.com> 
Date: Sun Jul 15 11:46:52 2012 +1000 
add goodbye message 


Í commit 4f73b989922b0ec6e528209b95cbd99c9f 


28858e 
8 Author: Louis Simoneau <louis@flippa.com> 
Date: Sat Jul 14 13:57:02 2012 +1000 


initial commit, added the hello.txt 


file 
012 Remember: when merging, start from the 
branch you want to merge the changes into. 


GitHub 

Okay, now we have learned how to commit and review 
changes, and switch and merge branches, we're ready 
to start sharing our code with the world, using GitHub. 

We'll first learn how to upload our new repository to 
GitHub and keep it up to date with our changes, and 
then we'll look at contributing to existing projects. 

Head over to github.com and sign up for a new 
account if you don't already have one (GitHub is free for 
open-source projects, you only need a paid account if 
you want to keep some of your repositories private). 
Then locate the link to add a new repository (it’s a little 
icon next to your username in the top-right, with a book 
and a plus icon) and click it. Enter in the name for your 
repository (in our case, hello_git), and submit the form. 

As soon as you've created your repository, GitHub 
helpfully provides a page of instructions for setting up a 
new repository or uploading an existing one. Jump to 
the section titled Existing Git Repo? and follow those 
instructions. After entering the directory where your 
existing repo lives, there are two more steps: git remote 
add and git push -u: 


001 git remote add origin git@github. 
com: rssaddict/hello_git.git 
@@2 git push -u origin master 


In Git terminology, a remote is a version of your 
repository that’s stored elsewhere. This could be on a 
co-worker’s machine, on a local server, or somewhere 
on the Internet. In this case, it will be hosted by GitHub. 

The first command, git remote add, is telling Git that 
our repository has a remote, called origin, that lives at 
the provided address (this will be different for your 
project, since it contains your GitHub username.) 

The next command, git push, is telling Git to take the 
local commit history on the master branch, and send it 
to the master branch of the remote named origin 
(Which is GitHub.) The -u option is only required the first 
time you push your changes to GitHub. 

When you run the git push command, Git will ask for 
your GitHub username and password. Enter them to 
push your code to GitHub. You can see it published on 
the site by refreshing your repository page. 


Contributing to an existing project 

Now that you know how to upload your own projects 
to GitHub, it's time to learn how to contribute to other 
people's projects. After all, that’s exactly what open 
source is all about! Of course, you can't push directly to 
a project you don't own - that would be chaos. But 


GitHub introduced the concept of forking - making a 
copy of a GitHub repository inside your own account. 

To fork a project, just navigate to that project's page 
on GitHub and click the fork button in the top-right 
corner. As an example, let's try forking Modernizr. Go to 
github.com/modernizer/modernizer and click Fork. 
After a few seconds, you'll land on your own copy of 
the Modernizr repository. 

Now you need to download a copy of the repo to 
your computer so you can work on it. Copy the URL 
from the box at the top of the page (it will look 
something like https://github.com/rssaddict/ 
Modernizr.git). Open your home directory in the 
terminal, and issue the git clone command, passing in 
the GitHub URL you just copied: 


001 git clone https: //github.com/rssaddict/ 
Modernizr.git 


This will copy the entire repository to a directory with 
the same name on your machine. You can now make 
changes, commit them, and push them back up to 
GitHub however you like. 

If you make changes that you think would be 
valuable for all users of the project, or fix a bug, you can 
submit a pull request, which invites the owners of the 
repository you forked to incorporate your changes. 
There's a pull request button conveniently located at 
the top of the page when you're viewing any of your 
forked repositories. 


Conclusion 

Now that you've mastered the basics of Git and GitHub, 
you'll be in a far better position to contribute to 
open-source web projects. Not only can you share your 
own work with others, you'll also be able to help out the 
community by fixing bugs and improving on the work 
of those who've come before. 


Extra reading 

This article has only skimmed the surface of what's 

possible with Git, and if you want to start using it as part 

of your workflow you'll have a bit more learning to do. 

Here are some of the best places to polish up on Git: 
git help: type git help in your terminal to get a list of 

available commands, and git help <command> to get a 
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© Latest commit to the master branch 
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After pushing our changes, they'll be visible on GitHub 


GitHub’s desktop applications provide a nice visual interface for 


working with branches 
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A few recent commits to the Modernizr project, as seen on GitHub 


Small commits 
are best 


When you first start working 
with Git, try to avoid making 
changes without committing, 
and train yourself to commit 
in the smallest possible 
increments: this makes it 
easier to revert back. 


detailed description of the command and all the 
available options. 

The Git Book: the Git website has an entire book 
about Git, available completely for free online. This is a 
fantastic resource that goes into a lot more detail about 
Git. git-scm.com/book. 

Git Immersion: Git Immersion is a fantastic online 
tutorial that walks you through a series of short 
exercises to learn all of Git's features, from the most 
basic to the more advanced. gitimmersion.com. 


Tags Downloads 


Ø comit 1e1285e896 


add goodbye message [Louis Simoneau] 


initial commit, added the hello txt file [Louis Simoneau] 
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Tips 


THE PHP FRAMEWORK FOR WEB ARTISANS. 


JUST GOT FOUR TIMES BETTER 


PHP has been crying out for a contemporary framework. 
Find out why Laravel is taking the community by storm 


t's difficult to deny the fact that, in recent years, 

the web development community has been 

incredibly hard on the PHP language and its 

faithful devotees. It's no wonder why; at the time, a 

number of poignant PHP-hate articles began 
circling the web like a virus, and some of its flagship 
frameworks, such as Codelgniter, were quickly growing 
stale. All the while, Ruby on Rails seemed to be leading 
the pack, in terms of innovation and ease of 
development. As time moved on, more and more 
coders found themselves ignoring PHP, as they instead 
reached for their Ruby toolbelts. 


INSTALL 


To install the latest development version of Laravel (v4), 
you'll need to first install Composer. Then, simply clone 
the repo, and install the dependencies. Git clone git:// 
github.com/illuminate/app.git myApp and composer 
install. You're ready to go! 


ELOQUENT 


Most PHP developers begin their journey by nesting 
countless lines of SQL directly into their frigid, 
unreadable PHP. Needless to say, excluding the most 
basic of websites, this quickly leads to an 
unmaintainable mess. 

Remember when you first heard about Ruby on 
Rails’ ActiveRecord? Well, in the PHP end of the world, 
Eloquent is its premier implementation. You want to see 
a few examples? 


Øl // Fetch all tasks 
2 $tasks = Task: :all(); 


// Fetch the task with an id of 1 
$task = Task::find(1); 


7 // Update a task 

$task = Task: :find(1); 

9 $task->title = ‘Put that cookie down!’; 
Ø Stask->save(); 


2 // Create a new task 
Task: :create([ 
‘title’ => ‘Write article’ 


51); 


- // Delete a task 


OTB Task: :find(1)->delete(); 


Folks, it’s not possible to write more readable code in 
PHP! Now it would be one thing if Eloquent only 


But things change; they always do. Along came a 
ridiculously smart young former .NET developer, Taylor 
Otwell, who was on the verge of unleashing a modern, 
elegant framework called Laravel, into the universe. At 
first, as is typically the case when yet another 
framework pokes its head up to say hi, many 
developers dismissed it as nothing but one more 
Sinatra clone that would quickly diminish into 
nothingness. But still, week after week, social network 
feeds were all of a flutter, praising Laravel’s elegance 
and readability. Could it be that PHP finally has a truly 
modern framework? 


allowed you to perform basic CRUD operations on a 
table, but that's certainly not the case. 

Consider for a moment table relationships, such as a 
user and their respective tasks. In Laravel, after setting 
a quick lookup method for each model, we can easily 
handle one-to-one relationships - or any kind of 
association for that matter. Here are a few examples, 
just to whet your appetite. 


BT // Get all tasks by the author with an id 
of 1 geg 
$tasks = User: :find(1)->tasks; 


// Get the author of a task 
$author = Task: :find(5)->user()->username; 


// Insert a new task by author 

$task = new Task([ title: ‘Go to store.’ 
D; 
@@B User: :find(1)->tasks()->insert($task); 


It's not a stretch to consider Eloquent to be the best 
ActiveRecord implementation in the PHP language. 


COMPOSER PACKAGES 


Beginning with Laravel 4 (released 28 May 2013), the 
entire framework will be modularized and available as 
individual Composer packages. 

Composer is a packaging system for PHP that is 
similar to PEAR, but better. It makes the process of 
dependency management as easy as possible. 

Think of the existing framework ecosystem. Right 
now, you're forced to live with each framework’s core 
set of features. You can't choose to, say, use Eloquent in 
a CakePHP application. As you can imagine, this truth 
has lead to an insane process of reinventing the wheel 
over and over... and over. 

Ladies and gentleman, the future of PHP is a 
modular one. Why install a bloated, massive framework, 


Are you no longer willing to sit on the sidelines? 

It’s time to dig in and discover why it is that in such a 
short timespan, Laravel has amassed such an 
enormous community of evangelists. Is it true, as they 
say, that Laravel actually makes PHP fun again? And 
could it be that PHP, as a framework, is no longer 
forever doomed to predominantly personal sites and 
ugly WordPress blogs? 

Nope; in fact, the PHP community just might find 
that, thanks to Laravel, Composer, and PHP 5.5, they're 
about to experience the next renaissance of the web's 
most popular server-side language. 


Above: Install Composer through getcomposer.org 


when you only require a few of its offerings? Well soon 
you won't have to. Only require Eloquent in a simple 
project? Fine - not a problem at all! Simply install it 
through Composer, and move on! 

So, if we're moving to a more package-based, 
modular PHP world, how does Laravel fit in? Well, think 
of it as a predetermined collection of packages, 
wrapped in a bow! Even better, should you need to 
update to the latest version of the framework, it's as 
easy as running composer update. 

As an example of the flexibility that this provides, let's 
add the popular Mockery testing library to a Laravel 
application. Begin with a new Laravel 4 project, and edit 
its composerjson file to require Mockery. 


{ 
“require”: { 
“{lluminate/foundation”: “>=1.0.0”, 
“mockery/mockery”: “dev-master” 
} 


“autoload”: { 
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“classmap”: [ 
“app/controllers” , 
“app/models” , 
“app/database/migrations” , 
“app/tests/TestCase. php” 


Refer to packagist.org for a list of Composer packages, 
as well as installation instructions. Now that we've 
informed Composer that our application requires 
Mockery, we can install the applicable dependencies. 


rrr tee cae = 


acne a ema Cores pou © mapep mre LF packages at are mathe mh Campecer 
rowne pacnage or nab Yow oe 


Search packages. 


Publishing Packages 
Define Your Package 
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onbeng a rarman 
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Above: Hundreds upon hundreds of packages are available 
through Packagist.org 


001 composer update 


And voila, that’s it! We can now use Mockery within our 
tests. This is the power of Composer and Laravel 4 at 
work! We have wheels; let's stop creating new ones! 
Hundreds upon hundreds of packages are available 
through Packagist.org. 


<?php 

use Mockery as m; 

class ExampleTest extends PHPUnit a 
Framework_TestCase {} 


ROUTES 


Most beginner PHP developers aren't familiar with 
anything other than the most natural of route systems. 
Create a directory tree to match your desired URI, and 
move on. For example, add an index.php file to the 
following directory: blog/admin/, and now you can 
access it by browsing to: localhost:8888/blog/admin/ 
index.php. Easy! Well, maybe at first, but you'll likely find 
that you need more flexibility and control over which 
route is triggered in your application. 

Laravel takes an incredibly simple and easy-to-use 
approach to routing. As an example, let's write the 
necessary route to display a view for a user's profile. 


Route: :get(‘users/{id}’, function($id) 
{ 


// find the user 


= $user = User: :find($id) ; 
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// display view, and pass user object 
return View: :make(‘users.profile’) 
~>with(‘user’, $user); 
y; 


Now, when a user requests example.com/users/1, the 
users/profile.php view will be rendered. 

Alternatively, we can use traditional controllers to 
instead handle the logic. 


001 Route: :get(‘users/{id}’, ‘Users@show’); 


Now, Controllers/Users.php will be responsible for 
rendering the view - specifically the show method. 


<?php 


class UsersController extends Controller { 
[kk 
* Display the specified resource. 
*/ 
public function show($id) 


{ 
// find the user 
$user = User: :find($id) ; 
// display view, and pass user 
object 
return View: :make(‘users.profile’) 
->;with(‘user’, $user); 
} 
} 


EASY AUTHENTICATION 


Nearly any web application of any substance will 
require a form of authentication on some level. Laravel 
provides a simple but easy to use interface for 
authenticating users. 

Begin by creating a users table with the necessary 
fields for the username and password. Remember: this 
is a perfect use-case for a migration! 

Laravel can then attempt to login a user - probably 
based upon user-supplied values from a form. Here's a 
basic example, minus the validation aspect. 


Route: :post(‘login’, function() 
{ $credentials = array( 
‘username’ => 
Input: :get(‘username’), 
‘password’ => Input: :get(‘password’) 
DE 


// perform validation 


9 if ( Auth::attempt($credentials) ) 
{ 

// Credentials match. Logged in! 
return Redirect: : to(‘admin/profile’); 


mi 
di 


Note that behind the scenes Laravel will automatically 
hash the provided password and compare it against 
what's stored in the user's table. 

Assuming that the user's credentials match, the user 
ID will be stored in the session, and the user will be 
logged in. Upon subsequent requests, you can grab the 
currently logged in user’s username with: 


001 $user = Auth: :user()->username; 


SENDING EMAIL 


Admit it: sending email through your application is 
always more complicated than it should be. Not 
anymore in Laravel 4! 

Built on top of the popular SwiftMailer package, you'll 
now find a new config/mail.php file in your application. 
This is where you can specify the necessary credentials 
to your email provider. Here's a stripped down version 
of what you'll find: 


<?php 
// app/config/mail.php 


return array( 
‘host’ => ‘smtp.example.com’, 
‘port’ => 2525, 
‘from’ => array(‘address’ => null, 
‘name’ => null), 
‘encryption’ => ‘tls’, 
‘username’ => null, 
‘password’ => null, 


A; 


Simply replace the values with those from your email 
server, accordingly. 

Next, we need a view for the email. Let's create one 
called ‘welcome.blade.php’, which will be used when a 
new member registers for our Justin Bieber fan website. 


<?php 
// app/views/emails/welcome.blade.php 


<html> 
5 <body> 
Hi there, {{ $user->name }}. Thanks 
again for signing up for the latest Justin 
Bieber news! We’ll look forward to seeing you 
around. 


Thanks, 


Management 
</body> 


Bi </ntm> 


With everything in place, let's set up the necessary 
example route, and send the email. 


Route: :get(‘/’, function() 
{ 
$user = User: :find(1); 


Backbonejs 0.9.2) 
» GitHub Repository 
» Annotated Source 
. 
Upgrading Backbonejs gives structure to web applications by providing models with key-value 
Events binding and custom events, collections with a rich API of enumerable functions, views 
ee with declarative event handling, and connects it all to your existing API over a RESTful 
- off JSON interface. 
~ trigger 
Model The project is hosted on GitHub, and the annotated source code is available, as well as 
-omni an online test suite, an example application, a list of tutorials and a long list of real- 
- constructor / initialize world projects that use Backbone. Backbone is available for use under the MIT 
"on software license. 
-set 
- escape 
-has You can report bugs and discuss features on the GitHub issues page, on Freenode IRC 
Rra in the #documentcloud channel, post questions to the Google Group, add pages to 
ai the wiki or send tweets to @documentcloud. 
- idAttribute 
= Backbone is an open-source component of DocumentCloud. 
~ attributes 
- changed 
~ defaults 
— Downloads & Danandancias ism cic and sea “tma aen 


Above: Backbone provides structure for your messy spaghetti code! 


m $data = [ ‘user’ => $user ]; 


006 // email view, data for view, closure to 
send email 

a Mail: :send(‘emails/welcome’, $data, 
function($message) use($user) 


$message 
->to($user->email) 
->subject (‘Welcome Bieber Fan!’) 
->attach(‘images/bieberPhoto. 


jpg’); 
»; 


return ‘Welcome email sent!’ ; 


y; 


Pretty simple, eh? We grab the new user from the table, 
and fire off an email to that user's associated email 
address, Thanks to the SwiftMailer functionality, 
performing seemingly complex actions, such as 
attaching files, is a cinch! Now, every new member 
receives a photo of Justin Bieber upon signup. Perfect! 


BFFs WITH BACKBONE 


Laravel 4 makes the process of creating RESTful APIs as 
simple as humanly possible. The key is in how, by 
default, JSON will be returned from a route. 

Let's imagine that we need to return a list of all users 
as JSON. Well, we can accomplish that in a single line. 


Route: :get(‘users’, function() 


{ 


return User: :all(); 
DY; 
If you run this route, you'll see a bit of JSON, such as: 


001 [{“id”:1, “username” : “jeffrey@example. 
com” },{“id”:2, “username” ; “joe@example.com”}] 


Are you wondering where the password field is? In 
Laravel, within the table's associated model, we can 
specify, via a $hidden property, which fields to hide 
from JSON output. 

Now, with a JavaScript library like Backbone, we can 
fetch this data with ease. 


var UsersCollection = Backbone. Collection. 
extend({ 
model: User, 
url: ‘/users’ 


dD; 


- var User = Backbone.Model.extend({}); 


var users = new UsersCollection; 
users. fetch(); 


users.toJSON(); // [Object, Object, 
Object] 


What about fetching just a single user instead? Well, in 
order to acheive that we would first need to set up the 
proper Laravel route 


Route: :get(‘users/{id}’, function($id) { 
return User: :find($id) ; 


»; 


As we've learned already in this tutorial, doing this will 
return the JSON for the requested user (minus the 
password). Next, we are going to create a Backbone 
model, and fetch the data. 


var User = Backbone.Model.extend({ 
urlRoot: ‘/users’ 


»; 


var user = new User({ id: 1 }); 
user.fetch(); // { id: 1, username: 
‘jeffrey@example.com’ } 


Notice how the brunt of the work here is done on the 
client-side? The Laravel code we're using is as 
barebones as it can possibly be. 


MIGRATIONS 


If you're exclusively a PHP developer, it's likely that you 
haven't yet experienced the joy of migrations, which 
were first popularised by the Ruby on Rails framework. 
Think of migrations as version control for your 
database. What would happen if, the day after you 
added that new field to your tasks table, you realised 
that it wasn’t needed after all? Well, you'd manually 
remove the field, right? But what about the other 
developers on your team? Their code may break if you 
don't tell them. With migrations however, we merely roll 
back the previous migration, and continue on with our 
day! Even better, when pushing changes to your server, 
a simple php artisan migrate command will 
automatically update your production database, When 
combined with Laravel’s Schema Builder, this makes the 
process of managing databases as easy as possible. 

Let's create a migration to add a new users table to 
our database. From the command line: 


ool php artisan migration:make create_users_ 
table --table=users --create 


In the snippet above, we specify the name of the table, 
as well as the --create flag. This is to specify that we're 
creating a new table, rather than simply modifying an 
existing one. 

This command will create a new migration file within 
our application. We can then leverage Laravel’s Schema 
class to prepare our table's schema. 


<?php 


use Illuminate\Database\Migrations\ 
Migration; 


class CreateTasksTable extends Migration { 
[kk 
* Run the migrations. 
*/ 
public function up() 
{ 


Schema: :create(‘tasks’ , 
function($table) 
{ 
$table->increments(‘id’); 
$table->string(‘title’); 
D; 


[kk 

* Reverse the migrations. 
*/ 

public function down() 

{ 
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Schema: :drop(' tasks’); 


Notice how this class offers two methods: up and down, 
which specify what action Laravel should take when 
executing a migration, as well as rolling it back. 

In this case, on up0, we create a new table, tasks, and 
specify two fields for the id and title of the task, 
respectively. When rolling back the migration, we simply 
drop the table. 

Run the migration by returning to the Terminal, 
and typing: 


001 php artisan migrate 


That's it! You now have a brand new tasks table with 
two fields! Uh oh, need to roll it back? Simple: 


001 php artisan migrate:rollback 


Goodbye tasks table. 


BLADE 


Laravel's Blade templating engine provides a clean 
syntax for views. For example, with regular PHP, to filter 
through a list of people and echo their respective 
names within a list item, we might write: 


<ul> 
<?php foreach($people as $p) : ?> 
<li><?php echo $p; ?></li> 
<?php endforeach; ?> 
</ul> 


This syntax can be applied to most of PHP's control 
structures. It's not too bad, but we can do better. Any 
Laravel view that contains the .blade.php file extension 
will be parsed accordingly. As a result, the previous 
snippet can be then replaced with: 


<ul> 
@foreach($people as $p) 
<li>{{ $p }}</li> 
@endforeach 
</ul> 


Notice how variables to be echoed are wrapped within 
{{ 3}, similar to what you'd find in a JavaScript templating 
engine, like Handlebars. 

Blade may also be used for elegant layouts and 
master pages. Let’s create a base master view to 
demonstrate this functionality. 


// views/layout .blade.php 
<!doctype html> 
<html> 
<head> 
<title></title> 


46 Web Design Tips, Tricks, & Fixes 


</head> 
<body> 
<div class=”container”> 
@yield(‘container’) 
010 </div> 
@11 </body> 
012 </ntmi> 
The @yield line is key here. This specifies that any child 
views with a section id of container should be nested 
there. Let's next create a new view. 


ði // views/home/hello. blade. php 
002 @layout (‘layout’) 


@section( ‘container’ ) 
005 = <hi>Hello, {{ $user->name }}!</h1> 
006 Gendsection 


Done! Easy master pages in PHP! 


RESOURCEFUL CONTROLLERS 


Without a bit of help, creating a RESTful service in PHP 
can prove to be somewhat difficult. Well, in Laravel 4, it 
couldn't be simpler. The framework offers what we refer 
to as Restful Resources. Let's test it out 

Within your routes file, specify a new resource. 


@01 Route: :resource(‘ tasks’, 
‘TasksController’); 


This line of code designates that we want to create a 
new resource, tasks, and place the TasksController 
controller in charge of handling the logic for each route. 

When following the principles of REST, this resource 
will automatically register routes for: 

GET tasks (Show all tasks) 

GET tasks/{id} (Show single task) 

GET tasks/create (Display form to create a new task) 

POST tasks (Create a new task) 

GET task/{id}/edit (Edit single task) 

PUT tasks/{id} (Update task) 

DELETE tasks/{id} (Delete task) 

Next, let's create that TasksController, but, rather than 
doing it manually, we'll let Artisan handle the boilerplate. 


001 php artisan controller:make TasksController 


This will create a new controllers/TasksControllerphp 
controller, and fill it with a bit of boilerplate. 


s 


a1 <?php 


class TasksController extends Controller { 
[xx 
x Display a listing of the resource. 
*/ 
public function index() {} 


[kk 


ZzSSRRSE 


= 
© 


* Show the form for creating a new 


resource. 

011 */ 

012 public function create() {} 

013 

ol /#* 

015 * Store a newly created resource in 
storage. 

016 */ 

@17 public function store() {} 

018 

oi /*x 

020 * Display the specified resource. 
o +/ 

022 public function show($id) {} 

023 

024  /xx 

025 * Show the form for editing the 
specified resource. 

026 */ 

@27 public function edit($id) {} 

028 

029  /*x 

030 x Update the specified resource in 
storage. 

031 x/ 

@32 public function update($id) {} 
033 

034 = /*x 

035 * Remove the specified resource from 
storage. 

036 */ 

@37 public function destroy($id) {} 
038 3} 


Each of these methods will be triggered when the 
applicable RESTful route is triggered. So to display a 
form to create a new task, we'd load the applicable view 
within the create method, which will be triggered when 
example.com/tasks/create is requested. That form 
should POST to /tasks, in which case the store method 
will be triggered. It couldn't be cleaner! 


Above: Refer to UserScape’s Vimeo page for the latest official 
Laravel screencasts: vimeo.com/userscape 


DATABASE SEEDING 


How many times have you found yourself manually 
seeding a database table with dummy records, for the 
purposes of testing? For me, well, it's a large number! 
Laravel 4 allows us to specify a seed file for a table. 

To try it out, create a new file with the same name as 
its respective table within the app/database/seeds 
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Above: Learn the ins and outs of Laravel at Tuts+ Premium: tutsplus.com/course/laravel-essentials 


directory of your application. This file should store an 
array of arrays, each containing the necessary key-value 


pairs. Here's an example: 


OOL <?php 

@@2 // app/database/seeds/tasks .php 
003 

004 return [ 

05 [ ‘title’ = 
006 [ ‘title’ = 
007 [ ‘title’ = 
008 1); 


‘Go to the store’ ] 
‘Finish Laravel article’ ] 
‘Pick up eggs.’ ] 


We've now described three new rows for the tasks table 
in our database. Let's seed it. 


@@1 php artisan db:seed 


Done! 


MODEL SETTERS AND GETTERS 


There's likely a variety of actions that you frequently 
trigger when setting or getting a field from a database 
table. For instance, when a user registers, to follow 
security best practices, we should always hash their 
password. Rather than manually doing the work, let's 
instead update the User model, and specify that when 
setting a password, it should first be hashed. 


@01 <?php 

@02 // models/User.php 

003 

04 class User extends Eloquent { 


@05 public function setPassword() 


006 í 

007 return Hash: :make( $this->;password 
); 

008 =} 

009 } 


Easy! Now, we never have to worry about that piece of 
the puzzle when registering a new user. Naturally, the 
reverse option is available as well, should you need 


public function fullName() 


004 
mm 
006 return $this->firstName . ‘ ‘ . 


$this->lastName; 


This new fulliNameQ method will now be available to our 
user instance. 


OOT echo User: :find(1)->fullName(); // John Doe 


COMMUNITY (CONFERENCE) 


Perhaps more important than anything else, Laravel, in 
a relatively short timespan, has amassed a thriving, 
evangelical community, comprised of some of the most 
influential developers in the PHP community. 

Why is this important? Simple: with evangelism 
comes education and contribution. The biggest hurdle 
for a new framework is getting the word out, and 
showing folks how to use it. Luckily, Laravel excels in 
documentation and tutorials and screencasts - 
including a full course by yours truly! 

Truth is, we've barely scratched the surface of what's 
possible in Laravel. We've yet to cover Laravel's error 
handling, PHPUnit integration, eager loading (before 
and after retrieving collections), and much more. Be 
sure to refer to the documentation to dig deeper into 
the framework, and keep your eyes peeled for the next 
update to Laravel! 


Below: The second Laravel conference, Laracon, will be held in Amsterdam on 30-31 August 2013. 


Learn more at laracon.eu/2013 
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Basic List of Tweets 


The first thing we'll do is pull in a list of the last 20 
tweets a particular user has posted. It's worth having a 
read of the Twitter API documentation to see what 
you can and can't do when using the Twitter API 
without authentication. The documentation can be 
found at dev.twitter.com/docs. 

In this article we'll be focusing on the REST API, 
which is the nuts and bolts of Twitter. If you have an 
authenticated session you can recreate any part of 
Twitter on your website, from posting status updates to 
a full inbox system. Hopefully by the end of this article, 
you will have enough knowledge of the Twitter API to 
create a fully integrated Twitter experience, but for the 
time being we'll look at the basics of getting connected. 
Once you've had a quick look at the Twitter API 
documentation, navigate to bit.ly/R9TXq7. 

You'll see a large block of text that probably won't 
make too much sense in its current format, but what we 
have here are the building blocks for most Twitter apps, 
specifically, we have the last two tweets published by 
@WebDesignerMag and all the associated meta data 
that goes with it. 

You can pick and choose what aspects of data you 
use out of this, but the two most common elements to 
display on your website would be ['text'] ; the actual 
tweet itself and [‘created_at ']; the time that the tweet 
was posted. You can of course add more, for example, 
you could include [‘source’] which displays how the 
tweet was posted. 

So now we have the raw data, we need to do a bit of 
PHP coding to interpret it. Before we do that, let's 
modify the URL that we'll be pulling the data from. We'll 
break it down into chunks so you can see how each of 
the variables affects our data. 


OI sfeed = json_decode(file_get_ 

icontents( ‘https: //api.twitter.com/1.1/ 
istatuses/user_timeline. json?include_ 
lentities=true&include_rts=true&screen_name=webd 
esignermag&count=20’ )) ; 
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17. Blog: Get great digital mags! The definitive guide for digital creatives, Web Designer magazine, is now availa... http://t.co/Ir4BuLMJ 
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Above: Our finished PHP code interprets the raw data from Twitter, and makes it more readable 


Øl https: //api.twitter.com/1.1/ 
statuses/ user_timeline. json? 


This is the API server and the script that we will be 
pointing to, nothing to change here. 


Øi include_entities=true 


This adds more information about the tweets in our 
data, and includes users that have been mentioned, 
hashtags, and other bits. If you don’t plan on using any 
of this data, it is best to set this variable to ‘false’ 


@@9 &include_rts=true 


This option will allow you to include a user's retweets in 
the feed. Setting this to false will only return tweets that 
the user has written themselves. 


<ol><? 
foreach($feed as $output) { 
echo ‘<li>’; 
echo preg_replace($pattern, $replace, $outp 
lut->text) ; 
echo ‘</li>’; 


</ol> 


Böl &screen_name=webdesignermag 


This piece of code here is identifying the username of 

the person whose tweets you want to display, and you 
can set it dynamically using a form field and the $ GET 
option in PHP. 


gi &count=2 


This variable sets the number of Tweets to return, 
change this to 20, but note that a high number here 
may cause your script to load slowly. 

Now we have our URL sorted out. we can add the 
PHP to output the tweets, the following step-by-step 
guides will give you snippets of code to add to your 
PHP page. The final outcome will be a more readable 
version of the Twitter raw data. We will add to this later 
on, to show more information in our tweets. 


1001 $pattern = “/http:\/\/(www\.)?(L*. J4\. 
[*.\s]+\. 70%. \s]*)/i”; 

002 $replace = “<a href=’http://\\1\\2’>ht 
tp: //\\1\\2</a>” ; 


~* 


og 


Top tips for 
developing 
with Twitter 


Pete Simmons, digital marketing 
manager for Lionhead Studios 
gives us his top tips for working 
with the Twitter API 


The benefit of Includes 

PHP Includes are a great way to keep your code neat, 
placing your common functions in a different file, you 
are able to reference them with very little code. 


The preg_replace function 

The preg_replace function in PHP is a handy way of 
finding a pattern of text and replacing it with 
something else. Here we are searching for any URLS 
and making them clickable. 


Double the dynamic URL 

You can add a second input field to your form and 
make the second Twitter username dynamic, allowing 
you to check the relationship of two people, rather 
than one against a set account. 


Twitter OAuth Authentication 

Some commands in the Twitter API require you to 
authorise a user via OAuth. There are plenty of 
premade authentication classes on the internet. A 
Google search will get you up and running in no time. 


PHP Includes are a great 
way to keep your code 
small and neat 
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Adding more information 

Now we have our list of tweets, we'll add a bit more 
information to them. We'll be creating a function in 
PHP that will allow us to display a posted [xx] minutes 
ago style timestamp, as well as where the tweet was 
made from. 

First thing we need to address is the fact that the 
URLs are clickable, but hashtags and mentions are not. 
While we're addressing this problem, we'll tidy up our 
code, It is best to put our functions in a separate PHP 
file, and call them as an include. If you are unfamiliar 
with this technique, have a read of www.w3schools. 
com/php/php_includes.asp, which will give you a 
better insight. 

A function.php script has been created which will 
loop through the entity data and pull out any mentions 
and hashtags, it will then turn them into clickable URLS 
that will display a hashtag search result or user profile, 
respectively. This is quite a lengthy script so go ahead 
and download it from pastebin.com/KCY5tCvf. Once 
copied, create a new PHP document and paste it in. 
Save this file as ‘functions.php’ in the same folder as the 
rest of your script. If you now add <?php require 
‘functions.php’ ?> at the top of your main script, you will 
have access to your new function. If you use the require 
variable, rather than include, you will ensure that the 
script will stop on a problem with the function file, 
instead of carrying on and issuing a warning. 

Now we have our function script in place, and have 
access to the functions included within, we can clean up 
our previous code. You can now remove the preg_ 
replace, $pattern and $replace elements from your 
code. With the old functions removed, you can call the 
new function by adding the following code: linkify_ 
text@output->text, $output); The code will pass in two 
variables, the first is the text of the actual tweet, and the 
second is the rest of the tweet data, including all of our 
entity data, 

If you now run the script. you'll see a list of all tweets, 
with clickable mentions and hashtags. The next thing 
we'll do is call another function from our functions.php, 


. Ifyou love @WebDesignerMag #FF @Books Imagine @imaginesubs @lgrobot @Knowyourapps @spaceanswers @LinuxUserMag posted 5 days ago via web. 


which will display how long ago the tweet was made. 
Alter your output code to the following: 


@@1 echo linkify_text ($output- 

>text, $output). ‘ posted 

‘, TimeSince(strtotime($output->created_at)). ‘ 
ago.’; 


Running the script now will show the tweet, links and a 
nicely formatted TimeSince text. The next thing to do is 
add information about where the tweet came from. 

To add he source of the tweet, change your output 
line to the following: 


@@1 echo linkify_text($output- 

>text, $output). ‘ posted 

‘, TimeSince(strtotime($output->created_at)). ‘ 
ago via ‘. $output->source .’.’; 


The source will now be displayed, We do not need to 
call out linkify function, as the source variable contains 
pre-formatted HTML. You will notice that if a tweet was 
published via twitter.com, the source will simply read 
‘web’, whereas if a third-party app was used a link will be 
created to that third party website. 


Getting your relationship status 
We'll move on from the basic list of tweets to something 
a bit more advanced now. We'll use the REST API to find 
out if a user follows you or not. Create a new PHP 
document and add the following code under the 
<body> tag: 


<form action=“check.php” method=“get”> 
| Twitter Username: <input type=“text” 
value=" id=“user” name=“user” /> 

<input type=“submit” value=“Check >” /> 
E </form> 


Save your PHP file as 'check.php'. If you run this page 
now, you'll see a formrwitht afTinptt box agg submit 
A `~ 


|. Want to win a £150 telescope to gaze into space? Check out this competition on the All About Space website spaceanswers.com/competitions/w... posted 5 days, 18 hours ago via web. 
. Web Designer is on sale today. Get to the shops or go to #greatdigitalmags to get your digital copy imagine-publishing.co.uk/greatdigitalma... posted 5 days, 22 hours ago via web. 

. Blog: Web Designer 198 now on sale: The latest issue of Web Designer is packed with the usual mixture of great ... tinyurl.com/604f2fs posted 6 days, 1 hour ago via twitterfeed. 

. The web designer's 101 winners: Congratulations to the following lucky winners: Steven Barman Micheal Mazzamuto... bit.ly/N4c74W posted 6 days, 10 hours ago via twitterfeed. 

. Blog: The web designer's 101 winners: Congratulations to the following lucky winners: Steven Barman Micheal Maz... tinyurl. com/7uy4esa posted 1 week ago via twitterfeed. 


button; this will act as a way for us to check the 
username against our target Twitter account. 

The next step is to add the PHP underneath our form 
so that we can process the form data. Add the following 
line to connect to the Twitter API using a dynamic URL: 


<?php 
if (isset($_GET[‘user’])) { 
$TW_user = $_GET[‘user’]; 
$feed = file_get_ 
contents(‘https://api.twitter.com/1.1/ 
friendships/exists. json?screen_name_a=’ .$TW_ 
user . ’ &screen_name_b=webdesignermag’ ) ; 
3 
?> 


Twitter Username: 
Yes they do 


Twitter Username: 
Nope! 


Above: Here we have the output of our PHP checker. You can alter 
the text to anything you like 


We are using the same method as before to connect 
to the Twitter API, but this time we are going to be 
adding a variable into the URL. This variable will be set 
from our form. By placing the entire PHP script within 
an isset condition, we avoid getting any errors when we 
run the page before completing the form. All code that 
we add from here on will need to be added before the 
closing curly bracket ("¥') to avoid springing any 
unwanted errors. 

Now we have our dynamic URL in place we need to 
do something with it. Underneath our dynamic URL 
we'll add an if statement that checks the result. The 
result that we get back from pinging the dynamic URL 
will be either true or false. Knowing this, all we need to 
do is check for the presence of the word'true’ this can 
be done via the following code: 


'. #Safari and #iPad. Is there an alternative browser for the iPad? And, is it any good posted 1 week ago via web. 
. #TLD If you could afford a top level domain what name would you use/buy? posted 1 week ago via web. 


. #webdesignermag Get a digital copy of Web Designer from #ImaginePublishing’s supersite imagine-publishing.co uk/greatdigitalma... posted 1 week, 1 day ago via web. 


). #iPad Do you use a different browser to Safari. Which one do you use and why? posted 1 week, 6 days ago via web. 


| #greatdigitalmags #webdesignermag Get the digital version of Web Designer on PC, Mac, iPad, iPhone, Android at imagine-publishing.co.uk/greatdigitalma.... posted 2 weeks, 1 day ago via web. 


|. #Twitter #facebook Twitter or facebook? Which is your preferred platform and why? Yes we do understand the irony posted 2 weeks, 5 days ago via web. 


|. #TwitterAPI Tell us about your favourite twitter apps or twitter apps you are going to build posted 2 weeks, 5 days ago via web. 


. #greatdigitalmags Get Web Designer on PC, Mac, iPad, Phone, Android at imagine-publishing.co.uk/greatdigitalma... posted 2 weeks, 5 days ago via web. 

; Get great digital mags!: The definitive guide for digital creatives, Web Designer magazine, is now available to... bit.ly/LV9ztl posted 2 weeks, 6 days ago via twitterfeed. 

. Blog: Get great digital mags!: The definitive guide for digital creatives, Web Designer magazine, is now availa... tinyurl.com/7ybtow6 posted 2 weeks, 6 days ago via twitterfeed. 

. Win The web desinger’s 101 most important decisions: The Web Designer's 101 Most Important Decisions is a book... bt. ly/L3jJKe posted 3 weeks ago via twitterfeed. 
. Blog: Win The web desinger’s 101 most important decisions: The Web Designer's 101 Most Important Decisions is a... inyurl com/7tugsca posted 3 weeks ago via twitterfeed. 

20. Build a responsive image slider with jQuery: No matter what your proficiency, creating responsive designs can b... bit.ly/Lfmq8R posted 3 weeks, 5 days ago via twitterfeed. 


Above: Our script now pulls in the Tweet as well f all requiged meta dta, including links 


/ ut 
/ 
/ 


1 
2. 
3. 
4. 
5. 
6. 
7. 
8. 
9. 
10. 
11 
12. #IE7 A big thumbs up to Kogan.com in their bid to help rid the world of old browsers. bbc.in/KXtOUC posted 2 weeks, 4 days ago via web. 
13. 
14. 
15. 
16. 
17. 
18. 
19. 


N 


OOL if ($feed === ‘true’) { 

002 $TW_result = ‘Yes they do’; 
003 } 

004 else { 

005 $TW_result = ‘Nope!’; 

006 } 


What the above code will also do, is set a variable with 
the appropriate response. From here we can simply 
print the results using an echo command, like so: 


@@1 echo $TW_result; 


If everything is coded correctly, you should be able to 
run the page without any errors for the first time, 
complete the form, and then have the page reload with 
a positive or negative response. Try it out with a few 
Twitter usernames that you know who do and don't 
follow you, to ensure that everything is working as it 
should be. 

From here we can expand our application and offer 
users a piece of digital content if they follow you. For 
those that are not following you yet, you can present 
them with a follow call to action, using the Twitter API. 


Giving away freebies! 
We have the groundwork for our Twitter app in place, 
now we just need to add the finishing touches. The first 
thing we'll focus on is rewarding our loyal Twitter 
followers with a piece of digital content. This can be 
anything you like, but for the purpose of this 
demonstration, we'll be revealing a link to the Twitter 
API documentation, Pretty sweet, right? 

This is a fairly easy change to make. All you need to 
do is change your true $TW_result variable to a 
hyperlink. This is done with the following code: 


001 $TW_result = ‘<a href=“https://dev. 
twitter.com/docs”>You follow us on Twitter, 
have a look at the Twitter API as a reward!</ 
a>’; 


It's probably best to change this to something a bit 
more exciting. The next task on the list is to change our 
negative variable to display the Twitter follow prompt. 
To do this we'll be displaying a simple follow button. 
More information on the Twitter follow button, and how 
you can customise it to your needs, can be found at 
dev.twitter.com/docs/follow-button. 


Twitter Username: 


In PHP you are able to close the PHP tags, add HTML 
and reopen the PHP code from where you left off. This 
is a really good way of keeping your code readable, if 
you are using an editor like Dreamweaver, all of your 
code completion and syntax highlighting will work with 
HTML again, once you've closed off your PHP. A basic 
example looks like this: 


OOT <?php if(some condition) { ?> 
002 <h1>Some standard HTML</h1> 

003 <? } else { ?> 

04 <h2>Some more standard HTML</h2> 
005 <? } ?> 


You can see that the PHP if statement carries on after 
the standard HTML has been rendered. With this in 
mind, you can change your negative $TW_result 
variable to the following 


OOL else { ?> 

002 <a href=“https://twitter.com/ 
webdesignermag” class=“twitter-follow-button” 
data-show-count=“false” data-lang=“en” data- 
size=“large”>Follow @webdesignermag</a> 

003 <script>! function(d,s,id){var 

js, fjs=d. getElementsByTagName(s)[0];if(!d. 
getElementById(id)){js=d.createElement(s); js. 
id=id; js.src=“//platform. twitter .com/widgets. 
js”; fjs.parentNode. insertBefore(js, fjs) ; }} 
(document, “script”, “twitter-wjs”) ;</script> 
004 <? 3 


You can see that we have actually removed the TW_ 
result variable. We can also remove It from the positive 
statement, ending the PHP code and switching back to 
HTML before and after the curly braces. You can also 
remove the echo command from the bottom of the 
code as well, as switching to standard HTML will output 
the relevant content automatically, 

One thing to note about the Twitter widget is that it 
detects an active Twitter login, meaning if you are 
logged on to Twitter and already follow the account you 
are checking, you will always get a grey box. The idea of 
the app is that a user who is logged in and follows you 
on Twitter will always get the positive answer to our if 
statement, and their free reward. A way around this, is 
to create a custom button with the API yourself. For the 
sake of this tutorial though, that would be excessive. 


Check > 


You follow us on Twitter, have a look at the Twitter API as a reward! 


Above: Our completed app in the true state, offering the user a link to click 


Twitter Username: 
W Follow @webdesignermag 


Check > 


Above: The app now in the false state, giving people the option to follow a user on Twitter 


Using CURL instead of 
file_get_contents 


file_get_contents with tl 
be slow if you make multiple calls, 
curl will speed things up 


(01) Setting up curl 


phpinfoO; to check that 
rts curl, it is p 


ur PHP set up 
tandard in most setups, but 
versions of 


> may run into problem 


go ahead and create a get_data function, which 


vill use to call a cı ymmand multiple time 


Finishing the function 

an now add the r of the curl code to our 
function. The will op€ ) a supplied U 
irn thi variables we t 


1 getting a lot of data 
001 function get_data($ur1) 

002 { 

003 $ch = curl_init(); 

Q04 Stimeout = 5; 

005 curl_setopt ($ch,CURLOPT_URL , $url); 
O06 curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
007 curl_setopt($ch,CURLOPT_ 
ONNECTTIMEOUT, $timeout); 

1008 $data = curl_exec($ch); 

009 curl_close($ch) ; 

1010 return ‘$data; ag 

| «(6 


Calling the function 


ur function cor 


> can ni il it 
within our Remember that you can é 

function to your functions.php file, saving 

Use the 


with t 


multiple times ac nultiple page: 


ariable 


function with a URL input, to set a v 


collected data 


EAD 


Begin using 


the Facebook 


Graph API 
with your 
website 


A powerful API that allows you to 
access the data behind Facebook 


tools | tech | trends Dreamweaver, PHP, MySQL 


o Set up your application 


Navigate to bit.ly/pquEvy and click Create New App. In the pop-up 
box, enter a name for your application and an application namespace. The 
namespace cannot contain uppercase letters, numbers or spaces and must 
be unique. Agree to the Facebook terms and conditions and press Submit. 


Your APP ID 


You will be taken to your App settings page. At the top of this page you 
will see your Application ID and Application Secret. It is important that you do 
not surface the Application Secret in any way, including via the page source 


code. Make a note of your Application ID, you will need this later. 


03 Application settings 


On your application settings page, there are a couple of fields that you 
need to fill out with server information - the first is App Domain. Enter the 
domain of your website without the HTTP or WWW; this will authorise all 
subdomains and directories on your server. Scroll down and click the Website 


box and fill in your server details here as well. 


» Authenticating a user 


Copy the code from the disc into a new PHP document. 


05 Adding app variables 


accept these permissions yet! 
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= Now we have our application set up, we need to create a way of 
obtaining an access_token from Facebook, the Access Token is the key that 
unlocks all sensitive data about a user. We'll need to redirect our user to a 

Facebook authentication page and then push them back to our application. 


You'll notice on lines three and four that our code requires our unique 
APP ID and APP Secret. Add these details in from step 2, as well as the domain 
on line five and save your PHP page at index.php. Running this page now will 
redirect you to a Facebook authentication page and ask for permissions. Don't 


n this tutorial we'll be recreating elements 
of Facebook, under the guise of ‘Fakebook’. 
This practical demonstration will show you 
how you can access certain elements of 
the Graph API for use on your website. 
There is no real point to recreating 
Facebook in its entirety using the graph, as 
they seem to be doing a pretty good job of 
that themselves! This is more a convenient 
way to show you the basics, so that you 
can pick and choose which elements you'd 
like to use for future projects. 

In this tutorial we will cover how to set up a Facebook 
application, how to authenticate a user on your website, 
and then how to pull information from the graph to 
display on your website. It is worth noting that 
Facebook has a tendency to change API features on a 
regular basis, so it is worth keeping up to date with what 
is going on, via the Developer Roadmap (found at 
developers.facebook.com/roadmap). Keep a mental 
note of anything that you may have coded for future 
reference, as you may find that your application 
suddenly stops working for no reason. It is unlikely that 
anything we cover in this tutorial will change, as the 
Facebook graph could be considered a core API feature. 


06 Extended permissions 

The code we used in step 4 is taken from the Facebook 
documentation and only provides us with basic access information. If you had 
allowed access in the previous step, you would now need to delete the 
application from your Facebook and re-add it. To get access to more in-depth 
data, change the $dialog_url variable (line 12) to the following. 


001 $dialog_url = “https: //www. facebook. com/dialog/oauth?client_ 
id=". $app_id . “&scope=user_about_me,user_activities,user_ 
birthday, user_checkins, user_groups, user_interests, user_ 

likes, user_photos,user_status, email ,user_hometown&redirect_uri="_. 
urlencode($my_url) . “&state=".$_SESSION['state']; 


07 Testing our permissions 

Run your code and click Go to App when prompted; you should be 
redirected back to the domain you entered on line 5 of your code, you should 
also see a welcome message with your name. You will also have stored an 
access_token in the $params['access_token’] variable. Delete the echo 
command outputting your name and add the following code to see available 
user data. 


001 print_r($user) ; 


08 Styling our data 

Open the CSS file from the disc and save it to the same folder as your 
project, add the following code above our PHP code. This will allow us to 
quickly style our information and give you a starting point for the layout of 
your project. You'll need to move the session_start to the top of the page. 


<? Session_start(); ?> 
<!DOCTYPE html> 


003 <head> 


@04 <title>Facebook Graph API</title> 
<link href=“style.css” type=“text/css"> 
@@6 </head> 


007 <body> 
09 Displaying basic information 


Now we have everything set up, it's time to pull some data and display 
it. The following code will pull in a user's profile picture, print a welcome 
message, and then construct a sentence based on their Facebook data. 
Replace your print_r line with the code for this step, which is on the disc. 


10 Getting users likes 

Now we'll connect to a different part of the Facebook graph and collect 
a list of pages that the user is a fan of. We'll be limiting this list to ten for speed 
reasons, but you can display as many as you like. Add the following code 
underneath our info div. 


<div style=“clear:both;"></div> 
= <div class=“likes"><?= $user->first_name ?> likes</ 
div> 
<ul> 
w < 
$likes = json_decode(file_get_contents(“https://graph. 
facebook .com/me/likes?limit=10&access_token=".$params[ ‘access_ 
token'])); 


006 
08 } 


?> 
ol </ul> 


a Making pages clickable 

= We can go one step further with our list of fan pages, by making them 
clickable. To do this we need to know the URL of each page; this information is 
not included in the graph data, but the page ID is. We can simply go to 


foreach ($likes->data as $value) { 
echo ‘<li>'.$value->name. ‘</li>’; 


Search for people, places and things 


ro 
Exe wD200 
fA i iia 


ABOUT THIS APP “Tis Avo wat. RECEIVE 

Your basic info 1?) 

= Your email address 
(peter simmons@activision.com) 

œ Your profile info: description, activities, birthday, 
groups, interests and likes 

= Your photos 

+ Your status updates 


Who can see posts this app makes for you on your 
Facebook timeline: 1?) 


@ Only me v 


y proceeding, you wil be taken to localhost Report app 


facebook.com/[page_id] and get to where we need to be, Alter your echo 
code to this: 


@01 echo ‘<li><a href="“http://facebook.com/' .$value->id. '” 
target="_blank">’ . $value->name. ‘</a></1i>’; 


2 Getting interests 

Getting a user's interests is very similar to getting their likes. Add the 
following code underneath the previous step, to show a list of clickable user 
interests. Again these will link through to a fan page based on the page ID. 


001 <div class=“interests"><?= $user->first_name ?>’s interests</ 
div> 
<ul> 
<? 
$likes = json_decode(file_get_contents(“https://graph. 
facebook. com/me/interests?limit=1ð&access_token=" .$params[‘access_ 
token’])); 
foreach ($likes->data as $value) { 
echo ‘<li>'.$value->name. ‘</li>'; 
} 
> 
</ul> 


B Adding photo albums 

The next step is for us to add a list of photo albums that the user has 
uploaded. Again we need to connect to a different section of the graph, and 
interpret text data and convert it to a clickable image. This image will in turn 
lead us into the photo album itself. Add this code under the last step. 


| <div class=“albums”><?= $user->first_name ?>'s albums</div> 


<? 
003 


$albums = json_decode(file_get_contents(“https://graph. 
facebook. com/me/albums?1imit=6&access_token=".. $params[ ‘access_ 
token'])); 
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004 foreach ($albums->data as $value) { ?> 


05 <div class=“albumcover"> 
006 <a href=“album.php?id=<?= $value->id ?>"> 
07 <img src=“https://graph, facebook.com/<?= $value->id 


Pi picture?type=thumbnail&access_token=<?= $params[ ‘access_token'] 
?>" border="0" /> 


008 </a> 
009 <div class=“description"><?= $value->name ?></div> 
010 </div> 
011 <2} > 
Exploring albums 


We now need to create a new PHP page that will display all the photos 
in a previously clicked album. Open stepl4a.php from the disc and save it as 
'album.php' in your project folder. Under the $user variable add the following 
code, this will pull all thumbnails from an album, and their descriptions. 


Q01 ?> 

002 <hi><a href=“index.php”>&1lt;- Back </a></h1> 
003 <div class=“albums"></div> 

004 <? 


005 $album = json_decode(file_get_contents(“https: // 
graph. facebook. com/” .$_GET[‘id'].“/photos?access_ 
token=". $params[ ‘access_token'])); 

006 foreach ($album->data as $value) { ?> 


007 <div class=“albumcover”> 
008 <img src=“<?= $value->picture ?>" border="@" /> 
09 <div class=“description”><?= $value->name ?></div> 
010 </div> 
011 23> 
012 <? 

Adding fancyBox 


The next step is to demonstrate how we can integrate the Facebook 
graph into a third-party tool, like fancyBox. Download the source files from 
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Authentication 
process 


At the start, we pushed 
our users away from our 
app, on to Facebook. 


More information on this 


process can be found at 
bit.ly/J6HnhG. 


fancyapps.com/fancybox and add them to the head of your HTML and into 
your project folder. Now all we need to do is wrap our thumbnails around a 
link like so. 


@01 <a class=“fancybox” href="<?= $value->source ?>" 
rel=“gallery” title=“<?= $value->name ?>"> 

002 <img src=“<?=  $value->picture ?>" 
border=“0" /> 


003 </a> 


» Comments and Likes 

As it stands we currently have the description of the image appearing 
twice. We'll amend our code to show the number of likes and comments 
under each thumbnail, rather than the description. We can do this through the 
following code in our description div. 


@@1 <div class=“description”><?= count ($value->likes->data) 
?> Likes <br /> <?= count($value- >comments->data) ?> 
Comments</ div> 


17 Tidy up errors 
You may notice that if your image has no likes or comments, your 
code will throw up some errors. This happens because the Graph does not 
include certain data if there are no likes or comments. To get around this, 


change the previous code to include 
some isset if conditions. 


@01 <div class=“description"><? 
if (isset($value->likes- 

>data)) { echo count ($value- 
>likes->data) ; } else { echo 
‘@'; }?> Likes <br /> <? if 
(isset($value->comments->data)) { 
echo count($value->comments- 
>data) ; } else { echo ‘0'; }?> 
Comments</div> 


18 Display comments 

=% So we have our likes and 
comments text in place under our 
images, now we want to be able to click 
them and have a fancyBox open with the 
comments, for this we'll use a hidden 
inline div. Add this under our albums div. 
We'll need to make one more call to the 
graph using the album ID from our 
previous foreach loop. 


ai < 

002 $album_comments 

= json_decode(file_get_ 
contents(“https://graph. facebook. 
com/". $value->id. “/?access_ 
token=". $params[ ‘access_ 
token'])); 

003 if (isset($album_ 
comments->comments->data)) { ?> 
004 <div id=“inline” style=“ 
display:none; width: 500px; "> 

005 <? foreach ($album_ 
comments->comments->data as 
$value2) { ?> 

006 <h2>Comments</h2> 

007 <h3><?= $value2- 
>from->name ?></h3> 

008 <p 
class=“comment”><?= $value2- 
>message ?></p> 


009 <? } ?> 

010 </div> 

e11 <}? 
One more error 


There is one more error that may 
have passed you by, as it's hidden in the 
source code. If your picture does not 
have a caption, it will throw up an error. 
Update your img title tag to the following 
to get around this. Add an else statement 
in here to show No Caption if you wish. 


001 title=“<? if (isset($value- 
>name)) { echo $value->name; } 
pa 


20 Making inlines 
© unique 

If you view source on your page, you will 
notice that all of our inline hidden divs 
have the same id. This is a problem if we 
want to display the contents in a 
fancyBox, as each has to be unique. In 
order to get around this, change the div 
id="inline” section to the following: 


<div id=“inline_<?= $album- 
>data->id ?>" 
style=“display:none; 

width: 5@Qpx;"> 


Clickable comment 
links 


We now need to add links to our album 
page to show the comments, we need to 
account for the fact that our inlines are 
now unique, so don't forget to pass the 
ID into your href. This can be done like 
so, and needs to be placed inside our 
first foreach loop, 


@01 <div class=“description”> 
<? if (isset($value- 
>likes->data)) { echo 


count ($value- >likes->data) 
sah else { echo 
‘Q'; }?> Likes 

<br /> 


<? if (isset($value- 
>comments->data)) { echo 

‘<a class=“fancybox” 
href="#inline_'.$value->id.'">'. 
count($value->comments- >data). 
t Comments</a>' ; } 

else { echo '@ Comments’; y> 
</div> 


22 Putting faces to 
names 

Adding the following code into our 
second foreach loop will add a user's 
profile picture to our comments box. The 
image displayed will be the Facebook 
square image, meaning we don't have to 
resize anything. If you want to, you can 
also make their name and picture 
clickable as described in Step 11. 


@Oi<div class=“profile_pic”> 
<img src=“https:// 

graph. facebook. com/<?= 
$value2->from->id ?>/ 
picture?type=square&access_ 
token=<?=$params[‘access_ 
token'];?>" align=“top” /> 
</div> 


Code library 


The Facebook 
authentication process 


We'll take a look inside the Facebook authentication process to 
show you what is happening 


$app_id = “"; 
Thefirst three lines Sa 5 eee 

define our application pp_secret =  ; 

settings from Facebook. $my_url = “"; 

This ensures that the 

application is only 

accessed from within 004 —session_start(); 

the app domain. r= $code = $_REQUEST[“code"]; 
Wethen moveonto 006 if (empty(Scode)) { 

create a session and $_SESSION[ ‘state’] = 


check to see if wealready igi ï 
havea valid coda set. md5(uniqid(rand(), TRUE)); //CSRF 
protection 


008 $dialog_url = “https://www. 
facebook. com/dialog/oauth?client_ 


Ifno valid $codeis id=" 

found, the PHP will . 
output a<script> 009 . $app_id . “&redirect_ur: 
command toredirect the urlencode($my_url) . “&state=" 


user back to Facebook. oio . $_SESSION[‘state']; 


ali echo(“<script> top. location. 
href='" .  $dialog_url . “'</ 
script>"); 


2} 


@13 if ($_SESSION[‘state'] && 

($ SESSION[‘state’] === 
$_REQUEST[‘state'])) { 

014 $token_url = “https://graph. 
facebook. com/oauth/access_token?” 


015 . “client_id="_. $app_id . 
“gredirect_uri=" . urlencode($my_url) 
016 . “&client_secret=" . $app_ 


secret . “&code=" . $code; 


$response = file_get_ 

contents($token_ url); 

018 $params = null; 
parse_str($response, 

$params) ; 


020 $graph_url = “https://graph. 
facebook.  com/me?access_token=" 
021 . $params[ ‘access_token’]; 


$user = json_decode(file_get_ 


Oncewe have our valid contents($graph_url)) ; 
pcode tie conte at echo(“Hello ".$user->name) ; 
the graph are decoded È , 
andawelcome message a } 
is displayed. else { 

echo(“The state does not 


match. You may be a victim of 
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EAD 


acebook is a platform that serves 
many eCommerce purposes. From 
large global corporations to small 
family-run businesses, they are all 
using Facebook to reach their 
customers, promote their brands and 
build their customer base. The ability 
for the public to write their own 
Facebook apps has seen the many 
uses for Facebook grow even further. 

StoreYa is a Facebook app that 
helps you integrate your online store to your Facebook 
page, allowing you to display your entire catalogue of 
products. Once installed, you can sort, re-order and 
categorise your products with the simple-to-use 
interface on the StoreYa website. Your new Facebook 
store will include many useful features - the Like and 
Share buttons for each product are worth a mention. 
These allow your customers to promote specific 
products on their own Facebook page. StoreYa boasts 
that you can integrate your eCommerce store with your 
Facebook page using their application in 30 seconds. 
We'll put that to the test using a Magento platform. 


Integrate your 
eCommerce 
store with 
Facebook 


Increase your the reach of your 
business by connecting to the world’s 
largest social network 


tools | tech | trends Magento, Facebook 


o Get a Facebook account 


If you're not part of the 1 billion people with a Facebook account, go to 
www.facebook.com and create one. It's really simple to do and should only 
take a few minutes. Make sure to follow the three main steps carefully and add 


as many people as you can. Remember - the more friends you have, the 
number of potential sales you could get is increased vant Ba 

Loca buaness or pce Company, organaron or mtton (and or produet 
JE ; 


Sign Up 
| i & 


les free and always will be. 
e-em Ena | Ariat, Ound Pa Fete trerarmen Cane or cammnty 


Page| Paes atnm 


04 Describe your business 

== Choose suitable profile and header images for your page. It's probably 
a good idea to use your company logo for the profile image and if you have 
the Photoshop skills then create a collage of your most interesting products 


02 Create a fan page for the header. A great example of this can be seen at www.facebook.com/ 
= If you already have a Facebook account (or have just created one) you imagineshopuk. Next add a description and website URL to improve the 
now have to set up a fan page. A fan page is slightly different from your ranking of your page in the search results. 


normal Facebook page and is primarily used to build a closer relationship with 
your customers. Go to www.facebook.com/pages and click on the green 
Create a Page button at the top of the screen. 


03 Pick your page category 

. The first step towards creating your new Facebook fan page is 
selecting the category that suits your needs, and is the most relevant to the 
service and/or product you are selling. If you are a business that wants to 
promote your products or services, then typically you would select the Local 
Business or Place category. The other categories to choose from include: 
Company, Organization or Institution, Brand or product, Artist, Band or Public 
Figure, Entertainment, and Cause or community. 
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A quick set-up, create a store for FREE! 


started now - Connect with Facel 


o5 Develop your fan page 

Now that the basics are in place it gives you a good foundation to build 
on. Try sharing something, or perhaps promote a special offer you are 
currently running. The more people your page is connected to on Facebook, 
the more active and engaging it will be. Set an achievable goal of getting your 
first 50 Page Likes. Get started by inviting your friends. 


06 Register with StoreYa 


Now that your Facebook page is up and running, it's time to set up the 


StoreYa application. Head over to www.storeya.com and click on the Connect 
with Facebook button. Logging in to StoreYa is done by connecting with 
Facebook using your personal profile. 


Choose your eCommerce platform 


A av 


‘oy on 


o= 


d a Bg = 
@) Create your Facebook store 


First you need to select which eCommerce platform you are using. For 
this example we will use Magento but the StoreYa application supports a wide 
range of platforms including: Shopify, Amazon and WordPress to name but a 
few. If your platform does not appear in the list then you can still upload your 
products using the CSV export option. 


08 Setting up the API 

In order for the StoreYa application to sync with your Magento store, 
you will first need to create an API User; this is done by creating an API role. 
Log in to the Magento admin panel and navigate to System>Web 
Services>Roles. This page lists the current API roles, and it is here that you will 
need to create a new role. 


Perey) 


winama ie 
toimumas ue 
nao 


Creating a new API role 


Click Add New Role and give it a name of your choosing. It can be 


anything, but a descriptive name such as ‘StoreYa API’ would be ideal. Next, 
click on Role Resources, which is on the left-hand side, then select the All 
option which appears in the drop-down list. Finally, click Save Role and the 
new API role will be saved. 


Create a new API User 

Now that the role is created you need to create a user that will be 
associated with this role. Click: System>Web Services>Users and you will be 
presented with a form. Fill out all the fields on the form and bear in mind that 
the API Username and API Key will be the username and password you will 
use later, so make sure they are secure. Click Save User and then select the 
role you created earlier. 


A Ban ranie een m pean mame neers one on He ee n 


tt | 
Oe eerie aon reetan es s toos tent on a Oe it em | 


O oam mentee nme evo na ttn Paet nat an tanes Peen Eang Ana te ete | 


o 


er eterna, 
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oducts using AP 


jegister/magento-api 


| 
Create your Facebook store | 
| 


You are one 
creating your 
Click Activate! 
(Publish your ston 
No credit card ne 
Choose any of 
{and got 30 days ol 


1. Add your store's URL 2. Import your inventory 
(Choose anather unpor solution) 


API User: How do linda? 
http//www imagineshop co uk! 
API Key: How do find it? 


How to find your API User and API Key 


® Using the API User and Key 

If the process was successful then you should see a green tick with a 
confirmation message presented at the top-left of the screen. You can now use 
the API User and API Key in the next step of the import process. Write them in 
the fields provided and hit Continue. 


2 Alternative syncing methods 

If you are using an older version of Magento then the API method may 
not work. If you experienced any problems following the steps above then you 
may want to consider using a Google base feed or manually exporting your 
products to a CSV file that you can then upload manually. 


B Exporting the CSV file 

Go to the admin control panel and click System>Import/Export>Profiles. 
Next you have to add a profile so click on the Add Profile button. Fill out the form 
ensuring that the Entity Type drop down has the Product option selected and 
the Profile Direction field displays Export. Hit the Save Profile button. 


agento Admin Panel 


@ Latest Message: magne 2013 Registration is Now Open’ Read deisis 


| 


pore spr Prete Esporas Produce 
— 
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“u Run the export command 

The profile you created should now be shown in the profile list. When 
you click on it you will be presented with a form filled with options. Choose a 
file name for the CSV file and select where you want to export the file to. Be 
aware that you cannot export this file to your local desktop; you can only 
export it to the server on which the Magento store Is hosted. Fill in the rest of 
the fields, and hit Run Profile, which is in the left-hand navigation bar. 


Ea Upload the CSV 

FTP to your server and navigate to the directory you told Magento to 
export the CSV file to. Copy it to your local machine and in your browser go to 
www.storeya.com/register/magento-csv. Enter your store URL and upload 
the CSV. A progress bar should appear, and once it has been uploaded hit the 
Activate button. Your Facebook store should now be up and running! 


Create your Facebook store 


4. Add your store's URL 


‘You have 4 notice unread message(s). Go to messages nbox. | 
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Profiles [O Ada Wow prore | 
Page fi ot1pages | View [20 [m] perpage | Total 6 records found | ResetFater | searen | 
i= — j i 7 f 
E i i lel afi [E] From: (3 | J doei | 
j | To: Ej | To: È [ 
6 Import Customers Import Customers Feb 1, 2010 11:28:40 AM Feb 1, 2010 11:26:40 AM Edt 
5 Export Customers Export Customers Feb 1, 2010 11:28:40 AM Feb 1, 2010 11:28:40 AM Eat 
Import Product Stocks Import Products imagine Shop Feb 1, 2010 11:28:40 AM Jun 23, 2010 4:56:30 PM Edi 
Imagine Snop 
Imagine Shop 
3 Import All Products Import Products Feb 1, 2010 11:28:40 AM Feb 2, 2010 2:31:52 PM E 
2 Expo Product Stocks Export Products Feb 1, 2010 11:28:40 AM Jun 23,2010 4:47:41 PM Edt 
1 Export All Products: Export Products Imagine Shop Feb 1, 2010 11:28:40 AM Nov 13, 2012 4:07:28 PM Edt 
Imagine Shop 
Imagine Shop 


(TRC E obon -soera com x 


Lé > © D wwwstoreyacomhome/dashooard/3174 


Dashboard 


Visitors today 4 


Jan Jon 15 Jon 16 J17 Jan 18 Jon 19 


Most visited products Most visited collections (categories) 


16 Check out your store 

Log in to Facebook and navigate to your fan page - you should see a 
Shop now button. Click on the button and it will take you to your new store. 
You will see that the categories are listed along the top for easy navigation. 
There is also a search bar that allows your Facebook users to search your 
catalogue of products. The order in which the categories and products are 
presented along with other customising options can all be managed by using 
the admin section of the StoreYa website. Simply log in and start configuring! 


i Managing your store 

When you get logged in you will be presented with a graph showing 
the number of visitors you have had. When a few weeks/months have passed 
this page will become increasingly useful as more data will be generated, 
allowing you to see which of your products and categories are most popular. 


18 Change the appearance 


Next we will want to give our store some style and individuality. Click 
Customize your store>Customization. From here you will be able to add a 
header image, change colours, select the number of products per page, and 
change the currency to that of your choosing. The easy-to-use interface 
makes this process a breeze, and it also allows you to see what your changes 
look like without having to navigate away to your Facebook page. 


19 Customising your store 

You may want to change the order of the products on the landing 
page of your store. To do this you can use the intuitive drag and drop system 
Click Manage store>Manage products. From this page you can perform a 
variety of tasks such as editing product data, removing a product from your 
store, and changing the order in which it appears. 


Don't suffer 
in silence! 


If you run into any difficulty 
while configuring your store, 
Emma Harper at StoreYa 
headquarters is only an email 
away. Use the online contact 


from to ask any questions. 
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Watch your sales increase 

Reaching out to a Facebook audience is a great way to raise your brand/ 
product awareness with an online community that may never have seen or 
heard about what your business is selling. Having a direct link from your 
Facebook page to your products removes the process of a potential customer 
having to track down your eCommerce store and view your product 
information the conventional way. Hopefully, over time you will see your sales 
increase, as well as raised awareness of your products. 


Manage products 


Front page on Facebook Add product a 


Order Product 


1 

| 

| [$] How it Works Book of Space Second Rev 
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B E 3D Artist issue 48 
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AD- 


Add vibrance to an | Sell stuff, your way 


Shoplocket's clever use of technology 


e 
| isn't really visible from a simple visit to 
e O ] | | ] | | e ] ( e SI e the website. Instead you have to actually 
| use its product in order to understand 


E ec | what is so clever about its technology. 
inspiratior ] www.shoplocket.com We've all become used to using YouTube 


and we've all spotted YouTube content 


hoplocket is a beautifully- place and handling the credit card transactions | appearing on other sites, from fansites to 
designed site for a new - not to mention the issues with online security. | corporate sites. The power of YouTube 
service that aims to simplify By embedding an iframe shop in your page you | was that you didn't have to visit its site in 
selling online. The site itself is can sell anything you want - a genius idea, The | order to take advantage of its power. 
a showcase for what the site itself uses a multicoloured homepage with That same philosophy is applied to 
Shoplocket service can do, striking bands of colour that communicate selling online with Shoplocket. They use 
and as such its primary focus different parts of the concept. The an iframe to embed a mini shop in 
is communication, letting the design style is clean with strong use anything you like, be it a blog, website 
user know what they do and of icons, and a subtle texture used or Facebook. The power Is in its 
why it is important for them. If throughout the backgrounds in ability to enable anything to be sold 
you are planning on selling online, then it is order to give contrast to the icons in any place on the web, 
quite a lot of hassle getting secure servers in and typography. 


Connect with Facebook 


Try it for free 


Don'tleavethe _ 
user hanging ~ 


As the user scrolls dow! 


with no further course butto — plits ea t to anc i i y efine exactly how long they 


scroll back up. j g subtle 7 stay on your site. 
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Astrong use of colour 


“The bold use of colour on the homepage is important, because a change of 

colour is a change in meaning, so colour should always be changed when the 

message is changed. It can be difficult to use a lot of colour well, and most sites 
<comment> | tend to use neutrals such as black, grey or white with a few complementary 


What our 


experts think | COlOUrsS. It's impressive to see the range of colour used so effectively.” 


ofthesite | Mark Shufflebottom 


‘TECHNIQUE Creating the coloured bars 


o1 Tiled image 


In Photoshop create a new document and make 
it 256 pixels in both width and height. We're going to 


create a noise pattern, but you can't do this on a 
transparent layer so make sure you create the 
document with a white background, then click OK to 
create the document. 


o2 Style the content 

Go to the Filter menu and choose Noise>Add 
Noise. In the dialogue pop-up window add 60% as the 
amount and choose Gaussian and Monochromatic, 
then click OK to accept. This will fill the image with a 
random noise pattern. Now we have to make the white 
areas transparent. 


Select the black areas 

Go to the Select menu and choose Color Range. 
Click on one of the black spots of noise and set the 
Noise level to 45%, then click OK. Copy and paste this 
selection to a brand new layer and delete the lower 
layer. Now set the Transparency of the new layer to be 
10% in the layer panel. 


Save as PNG 
Go to File>Save for Web and choose PNG-24 from 
the drop menu, making sure you've ticked the Transparency 


check box, Save the image out with the name ‘noise.png' to 
your site folder, and save the image in Photoshop in case 
you want to edit the opacity of the layer later on. 


Add to your CSS 

Create a div tag on the screen with the id bg, and 
then in the CSS part of your page add the CSS code shown 
below. The width and height are straightforward enough 
but the background image uses a combination of the tiled 
pattern placed on top of a CSS3 gradient, placing the 
shadow at the top of the coloured band 


göl #bg { 
002 


003 width: 100%; 


004 


005 height: 400px; 


007 background-image: url(noise.png), 
-WebKit-linear-gradient(top, #f06d4b 
0%, #fF916F 200px) ; 

008 

009 } 


06 Test in the browser 


Save the page and test it in the browser. With the 


background-image CSS3 property the first image listed is 
always placed on top, and then subsequent listings are 
placed in order behind this. Using this we can combine the 
transparent image on top of the gradient. We've only shown 
the WebKit code for brevity. 


INSPIRATION 


Using shapes in 
your design 


Some of the images used on the site have 
been placed within circles. This was hardly 
ever done on the web because images are 
rectangular, but has become a recent trend. 
Using other geometric shapes as a frame 
can really add a unique and dynamic look to 
your design. This is also becoming much 
easier thanks to the use of transparent PNG 
images and their increasingly widespread 
support across contemporary browsers. 


Techtip 


Curved shadows 
Some of the images used on the site have a 


curved drop shadow below them, which 
gives the impression that the edges are 
bending off the page. To get this effect, 
create a rectangle in Photoshop and 
duplicate the layer, filling it with black. Make 
this layer 50% Opacity and add a Gaussian 
Blur to it. Add a Liquify filter and in the 
window that opens check the Show 
Backdrop option. Now make your brush 
really large, 600px or similar. Push the 
bottom middle of the shadow upwards with 
the brush so that the shadow appears to 
bend. In the screenshot we are using a blue 
square as a guide. 
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Create tabbed JE 
boxes with 
multiple loops 
for WordPress 
themes 


This tutorial will teach you how to add a 
tabbed box with content from several 
categories to your WordPress theme 


tools | tech | trends WordPress, PHP, HTML, CSS and jQuery 


+Step code 


ometimes you want to offer your 
visitors even more options to dive into 
your site than just a list of posts and 
whatever headline solution you might 
have employed for your front page. This 
tutorial aims to teach you about one of 
the options at your disposal, namely the 
tabbed box. We'll create three different 
loops and let the user switch between 
them using tabs. The same multiple loop 
technique could obviously be employed with sliders or 
whatever solution that suits your fancy. As for the 
tabbed box, we'll rely on jQuery since it already ships 
with WordPress and is a popular and well known 
JavaScript library these days. 

Before we get to the actual tutorial though, we'll first 
talk a little bit about tabbed boxes (and content sliders 
for that matter). You see, it is important to use these the 
right way, because if you don't, youre not only adding a 
feature users will ignore, you're adding clutter and site 
weight overhead as well. Tabbed boxes that don't fill a 
specific need. sporting supporting content or additional 
ways into the site that the visitor will actually want to 
use, just shouldn't be there. There's also the mobile 
aspect to take into account, so make sure your tabbed 
box works well in mobile browsers should you choose 
to include it there as well. 

Use tabbed boxes and sliders with caution; make 
sure you think them through, and you'll be just fine. 
Less is more, you know. 


64 Web Design Tips, Tricks, & Fixes 


o Decide what you're doing 

Before we attempt to do anything at all, we need 
to figure out exactly what it is we're doing. We'll create 
three separate loops that list content from three different 
parts of the site. For this we are going to use categories 
and tags, so this is where you decide which categories 
to use. For the purposes of this tutorial, we will be using 
the categories Superstar and Movies, as well as the tags 
Duck and Rabbit. 


02 Where to put the box 

You obviously need to decide where your box 
should be, For this tutorial, | have created a child theme 
for the Twenty Eleven theme, and copied the index.php 
file to the child theme so | can make edits without 
having to worry about the theme breaking when it is 
updated by the author. You can do it any way you want; 
the files are available with this issue. 

If you want to learn more about child and parent 
themes, read up on them in the WordPress Codex 
(codex.wordpress.org/Child_Themes) and check out 
Smashing WordPress: Beyond the Blog, 3rd Edition by 
Thord Hedengren (4th Edition is due in late 2013). 


But really, where did you put 
the box? 
We want the box to be just above the content, so plan 
to add it under div#content in index.php. Look out for 
the following code in index.php, just below the get_ 
header() part. 


@01 <div id=“primary”> 
002 <div id=“content” role=“main"> 


<!-- THIS IS WHERE THE TABBED BOX WILL 
BE ==> 


04 Creating a new loop 

Let's start by creating a new loop. We'll use 
WP Query to do this, and then we'll reset it so it won't 
interfere with other loops on the site. We'll pass the 
arguments to $superstar and then we'll loop the 
content, like this: 


001 <?php 
= // Arguments for WP_Query 


$args = array( 
‘category_name’ => 
“superstar, 


); 
~ // The new loop stored in 
$superstar 
008 $superstar = new WP_Query( $args 
); 
009 while ( $superstar->have_posts() 
) : $superstar->the_post(); ?> 
010 <!-- Loop output goes here 
=>. 


@11 <?php 


‘showposts’ => 5 


p 


Are they really making sequels to movies 


now?! 


Posted on July 18, 2012 by tdh 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus 
handirarit arcu sadi arat molestie vehicula Sect auctor neque a telus. rhoncus ut aleitand 


RECENT posts 


= Are they really making sequel 


to movies now?! 


+ I hear a movie is coming out 


n?! 


»_Did vou naa that mavia?. 


_ fies AMA 


<Left, top tobottom> 
“This is where we'll put our tabbed box of links 


+ All three loops are in place, each with their own list. The 
next step will be to make thema tabbed box instead 


+ We now have our first loop, showing five posts from the 
superstar category ina list, at the top of the site (step 6) 


5 Superstar Posts 


* Rabbits are natural supe 


5 Duck and/or Rabbit Posts 
= This out both Duck 


012 // Loop ends 

013 endwhile; 

014 // Reset the query 
015 wp_reset_postdata(); 
016 ?> 


This loop will fetch the five latest posts from the 
category superstar. 


05 Populating the new loop 
Now, we also need some actual output to go 
with our brand new loop. Take a look at the code in the 


RECENT posts 
* Are they really making sequels 


o is coming out 


= This is about boi 
F 


= This is a Rabbit post 


RECENT COMMENTS 


* admin on Comment Te 


ontributor on Cor 


* telyworthtest2 on Comment 


Test Author on Comment Test 


ARCHIVES 


previous step; we'll replace the Loop output goes here 
comment with some actual linked titles to the posts. 
We'll place these links inside a list, so we need to put 
each in a li as well. 


001 <li> 

002 <a href=“<?php the_permalink(); 
?>" title="<?php the_title_attribute(); 
?>"> 

003 <?php the_title(); ?> 

004 </a> 

005 </li> 


<Above> 
+ This is what the tabbed box will look like, a simple design 
without the need for extensive CSS 
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ve<html dir="ltr" Lang="en-US"> 
<!--<! [endif]--> 
v<head> 


<meta charset="UTF-B"> 


<meta name="viewport" content="width=device-width"> 
<title>WordPress Dev | Just another WordPress BATES TENS 


<link rel="profile" href="! 


‘xf, 


3 
<link rel="stylesheet" typentext/ess™ nedia="all” href=" i nt, 
ittp://localhest: 888/dev-en/xntrpc. ph" 


<link rel="pingback" href=" 
<!--[if Ut IE 9]> 


<! [endif]--> 


"> 


<script src="http://localhost:8888/dev-en/wp-content/themes/twentyeleven/js/html5.js" type="text/javascript"></script> 


<meta name=" robots" content="noindex,nofollow"> 

<link rel="alternate" type="application/rss+xml" title="WordPress Dev » Feed" href="http://localhost:8888/dev-en/feed/' 

<link rel="alternate" types: agp Licaion/ casey title="WordPress Dev » Comments Feed" href="http://localhost: 8888/dev—en/comments/feed/": 
‘http: //localhost : 8888/dev-en/wp-inc ludes/css/admin-bar.css?ver=3.4.1 


<link rel="styleshee! 


<script type="text/javascript” ares 


href: 


= MS 
w u. css" 


"></script> 


‘http: // localhost: 8888/dev—en/wo-includes/is/iquery/iquery. js?ver=1.7.2' 
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost: 8888/dev-en/xmirpc.php?rsd"> 


p<style types"text/css">.</style> 


</head> 


</html> 


ry n 
Themes || install Thorn 
3 E Manage ins es 


Always queue 
properly 


The purpose of using 
WordPress queue 
methods for JavaScript is 
to rely on the platform to 


make sure everything 
is loaded at the 
optimal moment. 


Just what we want 


Let's put this into our loop, also adding a div and 
ul container, like so: 


<div id=“tabbed-box"> 
<ul> 
<?php 
// Arguments for WP_Query 
$args = array( 
‘category_name’ =) 
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<style type="text/css" media="print">#wpadminbar { display:none; }</style> 
<style type="text/css" media="screen">.</style> 


<body class="home blog logged-in admin-bar two-column right-sidebar customize-support">.</body> 


‘superstar’, 
‘showposts' => 5 
); 
// The new loop stored in 
$superstar 
010 $superstar = new WP_Query( $args 
); 
w while ( $superstar->have_posts() 
) : $superstar->the_post(); ?> 
<li> 
<a href=“<?php the_ 
permalink(); ?>" title=“<?php the_title_ 
attribute(); ?>"> 
<?php the_title(); ?> 
</a> 
</li> 
<?php 
// Loop ends 
endwhile; 
// Reset the query 
wp_reset_postdata() ; 


<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost: 8888/dev-en/wp-includes/wlwmanifest.xml"> 
<meta name="generator" content="WordPress 3.4.1"> 


?> 
</ul> 
</div> 


07 Don’t forget to reset 

Now, why exactly do you need to reset the data? 
Well, if you don't then you might end up having an 
altered query for subsequent loops, and that is usually 
such a headache to sort out. Use wp_reset_postdata() 
after your loops. 


Create another loop 

It is time to create our second loop, this one with 
five posts sourced from the Movies category. You'll no 
doubt recognise the code, the only change from the 
Superstar loop being the category and using $movies 
instead of $superstar. 


<2php 
// Arguments for WP_Query 
$args = array( 


— 
Superstar Movies Duck + Rabbit 


Link to a post 
Link toa post 
Link to a post 
Link to a post 
Link to a post 


5 Superstar Posts 
Rabbits are natural superstars 
Superstar ducks? Do they exist? 


‘category_name’ => 'movies', 
‘showposts' => 5 
); 
// The new loop stored in $movies 
$movies = new WP_Query( $args ); 
while ( $movies->have_posts() ) : 
'ies->the_post(); ?> 
<li> 
€ <a href=“<?php the_permalink(); ?>” 
title=“<?php the_title_attribute(); ?>"> 
<?php the_title(); ?> 
</a> 
</li> 
<?php 
// Loop ends 
endwhile; 
// Reset the query 
wp_reset_postdata(); 


287888222 


> 
v 


09 Tag instead of category loop 
= Wouldn't it be great if our third and final loop 
gave us five posts tagged with duck and/or rabbit? 
Basically, let's remove the category argument and 
replace it with one for tags, this one accepting posts 
tagged with duck and/or rabbit. Both will work, as will 
just one of them. 


901. <?php 
ð // Arguments for WP_Query 


de $args = array( 
‘tag’ => ‘duck, rabbit’, 


‘showposts' => 5 
); 
// The new loop stored in $duckrabbit 
$duckrabbit = new WP_Query( $args ); 
a while ( $duckrabbit->have_posts() ) : 


P Search 


RECENT posts 

+ Are they really making sequels 
to movies now?! 

*_1 hoar a movie is coming out 
soon?! 

* Did you see that movie? 

* This is about both Ducks and 
Rabbits 

= This is a Rabbit post 


RECENT COMMENTS 
* Mr WordPress on Hello world! 
= admin on Comment Test 


$duckrabbit->the_post(); ?> 


<li> 
= <a href=“<?php the_permalink(); 
?>" title=“<?php the_title_attribute(); 2>"> 
012 <?php the_title(); ?> 
</a> 
</li> 
<?php 
// Loop ends 
endwhile; 
// Reset the query 
wp_reset_postdata() ; 
> 


10 Three loops 


Now we have three different loops, each one 
inside a list of its own. Add a heading above the post 
lists in order to make them stand out from each other a 
little better. Here's the full code, including the wrapping 
div and ul tags used around each loop so that the lists 
will work properly. 


O01 <div id=“tabbed-box"> 


002 <!-- First loop, 5 posts from SUPERSTAR 
category --> 
003 <h3>5 Superstar Posts</h3> 
004 <ul> 
<?php 
// Arguments for WP_Query 
$args = array( 
‘category_name’ => ‘superstar’, 
‘showposts’ => 5 


5 

// The new loop stored in 
$superstar 
612 $superstar = new WP_Query( $args ); 


013 while ( $superstar->have_posts() ) 
: $superstar->the_post(); ?> 


| <li> 
<a href=“<?php the_permalink(); 
?>" title="<?php the_title_attribute(); ?>"> 
<?php the_title(); ?> 
</a> 

</li> 
<?php 

// Loop ends 

endwhile; 

// Reset the query 

wp_reset_postdata(); 
?> 
</ul> 


<!-- Second loop, 5 posts from MOVIES 
category --> 
<h3>5 Movies Posts</h3> 
<ul> 
<?php 
// Arguments for WP_Query 
$args = array( 
“category_name’ => ‘movies', 
‘showposts' => 5 
di 
// The new loop stored in $movies 
$movies = new WP_Query( $args ); 
while ( $movies->have_posts() ) : 
ies->the_post(); ?> 
<li> 
<a href=“<?php the_permalink(); 
?>" title=“<?php the_title_attribute(); ?>"> 
<?php the_title(); ?> 
</a> 
</li> 
<?php 
// Loop ends 
endwhile; 
// Reset the query 
wp_reset_postdata() ; 


CRH 


?> 


049 </ul> 


@50 <!-- Third loop, 5 posts tagged with 
DUCK and/or RABBIT --> 
<h3>5 Duck and/or Rabbit Posts</h3> 
<ul> 
<?php 
// Arguments for WP_Query 
$args = array( 
‘tag’ => ‘duck,rabbit', 
‘showposts'’ => 5 


); 

// The new loop stored in 
$duckrabbit 
060 $duckrabbit = new WP_Query( $args 
); 
061 while ( $duckrabbit->have_posts() ) 


: $duckrabbit->the_post(); ?> 
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<li> 
<a href="<?php the_permalink(); 
2>" title=“<?php the_title_attribute(); ?>"> 
<?php the_title(); ?> 
</a> 
</li> 
<?php 
// Loop ends 
endwhile; 
// Reset the query 
wp_reset_postdata() ; 


? 
</ul> 
</div> 


The tabbed box design 

For this example we're going to go with a simple 
tabbed box, with each tab heading sporting a nice fat 
line above itself. The active one is highlighted with a 
black line, while the others are differentiated by having 
light grey ones instead. Within the tab is a simple list of 
links with lines separating them. Nothing fancy, just 
something simple. You could of course create anything 
you want; it is all CSS anyway. 


The tabbed box markup 

The markup for the tabbed box is really simple. 
We'll have a ul#tabs with a li for each tab link. Then we'll 
have three div containers, each containing the content 
of each tab. 


<ul id=“tabs"> 
<li id=“tab-content-superstar” 


class="tab-item active-tab"> 
003 <a href=“javascript:viewTab('content- 
superstar’) ;">Superstar</a> 


+ </li> 


<li id=“tab-content-movies” class=“tab- 
item"> 


006 <a href=“javascript:viewTab('content- 
movies’) ;">Movies</a> 


öö </li> 
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Superstar Movies Duck + Rabbit 


Are they really making sequels to movies now?! 


| hear a movie is coming out soon?! 


Did you see that movie? 


Readability Test 


008 <li id=“tab-content-duckrabbit” 
class=“tab-item"> 
009 <a href=“javascript: viewTab(‘content- 
duckrabbit’);">Duck + Rabbit</a> 

</li> 


3 </ul> 


<div id=“tabbed-box"> 
l- <div id=“content-superstar” class="tab- 
content”"> 
Content for Superstar tab. 
</div> 
<div id=“content-movies” class=“tab- 
content” style=“display: none;"> 
Content for Movies tab. 
</div> 
<div id=“content-duckrabbit” 
class=“tab-content” style=“display: none;"> 
Content for Duck + Rabbit tab. 
</div> 
</div> 


B Adding some CSS 

Just the markup alone won't make the markup 
look like we planned, so here's the necessary CSS for 
making it work. 


ul#tabs { 

2 float: left; 
width: 100%; 
margin: 0; 
padding: 
list-style: none; 


i 


li.tab-item { 
float: left; 
margin-bottom: -1px; 
margin-right: 10px; 
padding: 5px 0; 
border-top: 5px solid #eee; 


head section here is from our function in functions.php 


li.active-tab { 
border-top-color: #000; 


divittabbed-box {} 


div, tab-content { 
float: left; 
width: 100%; 
margin-bottom: 3@px; 
background-color: #eee; 


Tabbed boxes and 
widget areas 


There are anumber of things you 
could do with tabbed boxes and the 
technique presented in this tutorial. 
Thanks to the flexibility of widget 
areas, and the plethora of wi 
available through plug-ins for 
WordPress, itmight be a better fit for 
your needs, rather than using loops. 
ploying widget areas instead of 
y. Just create a ded: 


loopsise: ated 


widget area per tab (in fun 


ons.php, 


as usual), and then use dynamic 
sidebar0 toinclude them rather than 
the loops. This will let you drop 
widgets in the different tabs and 
hence offer whatever functionality 
you might like. You could take it even 
further and let each widget becomea 
tab on its own, although that means 
you'll have to alter the JavaScriptand 


markup quite abit 


div.tab-content ul { 
margin: 0; 

2 padding-top: Spx; 
3 

35 div.tab-content ul li { 

6 margin-bottom: 5px; 
padding: © 10px 5px 10px; 
border-bottom: 1px solid #f8f8f8; 
list-style: none; 

3 


4 2 div. tab-content ul li:last-child { 
border-bottom-width: 0; 
padding-bottom: 0; 

$ 


n Loading jQuery 


The JavaScript that we are going to use for this 
tabbed box requires a little bit of jQuery, so we first 
need to make sure that jQuery is actually loaded, We'll 
do this inside the theme's functions.php, because it is 
better than having to add stuff in the head section in 
header.php. This is easily done with wp_enqueue_ 
scriptO, and since WordPress ships with jQuery we just 
need to pass ‘jquery’ to it. 


@01 wp_enqueue_script( ‘jquery’ ); 


a Queuing jQuery 

To properly queue jQuery, we'll need to create a 
function that we will then hook onto the wp_enqueue_ 
scripts hook, hence properly including the script the 
way WordPress wants us to. In functions.php we'll create 
the wd200 scriptloader() function that will contain all 
the scripts we need, and then we'll attach it to the hook 
with add_action0. 


function wd20@_scriptloader() { 
// Enqueue the script 
wp_enqueue_script( ‘jquery’ ); 
} 
add_action( ‘wp_enqueue_scripts', wd200_ 
scriptloader ); 


16 The necessary JavaScript 

Now, we need another JavaScript for the actual 
tabbed box. This script basically changes the display 
elements of the tab content containers, as well as 
applying the active-tab class on the active one. 


// Function to view tab 
function viewTab(tabId) { 
// Get all child elements of "tabbed- 
box” 
004 var elements = 
children(); 
// Loop through them all 
m jQuery.each(elements, function(index, 
value) { 


jQuery(‘#tabbed-box'). 


// Is clicked tab 
if (jQuery(this).attr(‘id’) == 
tabld) { 
// Show element 
a jQuery(this).css({ 
‘display’: ‘block’ }); 
// Make sure CSS is correct for 
tab 
012 jQuery(‘#tab-'+ jQuery(this). 
attr(‘id')).addClass(‘active-tab'); 
3 
// Is not the clicked tab 
else { 
// Hide tab 
jQuery(this).css({ 
‘display’; ‘none’ }); 
018 // Make sure CSS is correct for 
tab 


jQuery(‘#tab-'+ jQuery(this). 
attr(‘id')).removeClass(‘active-tab’); 


a D»; i 
EJ e 


Although we could just include that in the head section, 
it wouldn't be the prettiest solution in the world. Instead, 
let's register the script so that WordPress can use it, with 
wp_register_script(). The first parameter is the handle 
that we'll use to include it in just a few minutes, and the 
second one points us to where the script is located. 
Note the use of get_stylesheet_directory_uri() here, 
which works with both child and parent themes. The 
script is in the theme's js folder. 


@01 wp_register_script( ‘tabbedbox_script’, 


get_stylesheet_directory_uri() . ‘/js/ 

tabbedbox.js' ); 

18 nee the JavaScript 
properly 


Now we just need to add the script registration to the 
function that we created back in step 15, along with the 
code for actually queueing the script, and it should then 
load up properly on the page. 


function wd200_scriptloader() { 


// Register your script 

wp_register_script( ‘tabbedbox_script', 
get_stylesheet_directory_uri() . ‘/js/ 
tabbedbox. js’ ); 


// Enqueue the script 
wp_enqueue_script( ‘tabbedbox_script’ 


wp_enqueue_script( ‘jquery’ ); 
} 
add_action( ‘wp_enqueue_scripts’, wd200_ 
scriptloader ); 


19 Aworking tabbed box 

Look at that, we have a working tabbed box! 
Unfortunately there's nothing you'd want to show your 
grandparents in it, so we'll have to add the loops we 
created before. First of all, add another div container to 
wrap the whole thing in, give it the id tabbed-box- 
container and add the following to style.css: 


#tabbed-box-container { 
width: 100%; 
display: block; 

3 


20 Adding the loops 


This is easy enough, just copy and paste the 
corresponding loop to each tab content div container. 
Here's the Superstar category loop for reference. Note 
the removal of the h3 heading since that doesn't make 
sense when you have a visual indicator in the active tab. 


Böl <!-- First loop, 5 posts from SUPERSTAR 
category --> 
002 <div id=“content-superstar” class=“tab- 
content”> 

<ul> 

<?php 

// Arguments for WP_Query 
$args = array( 
‘category_name' 


‘showposts' => 5 


=> ‘superstar’, 


); 
// The new loop stored in $superstar 
$superstar = new WP_Query( $args ); 
while ( $superstar->have_posts() ) : 
$superstar->the_post(); ?> 
B <li> 
<a href=“<?php the_permalink(); 
?>" title=“<?php the_title_attribute(); ?>"> 
<?php the_title(); ?> 
</a> 
</li> 
<?php 
// Loop ends 
endwhile; 
// Reset the query 
wp_reset_postdata() ; 
> 
</ul> 
</div> 


a In allits glory 


This is all there is to it. The complete code for the 
tabbed box is on the resource disc, loops and all. 


Save and test 

You'll find the finished code as a working child 
theme on the disc. The theme is free to use and abuse, 
so take what you need from it and build your own. Just 
remember that you need the parent theme installed for 
a child theme to work, in this case Twenty Ten. 
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ordPress plug-ins are a great 
way to add extended 
functionality to your blog. 
They simplify complicated 
functions for users, allowing 
them to add additional 
features through shortcodes 
or widgets. The overall 
installation of a WordPress 
plug-in is straightforward, but 
what happens in the background can change the entire 
way WordPress functions. 

We will not be covering adding plug-in elements 
manually to a theme file as this is a very manual 
process, This tutorial has best practices in mind, and 
shows you how to store data correctly, and more 
importantly, how to remove all traces of your plug-in 
when it is deactivated. Although removing all data when 
a plug-in is removed is not a requirement of a plug-in 
that is released to the community. It is generally wise to 
make sure you do so to avoid clogging up the 
WordPress database with information that is not needed 
and hard to remove. 

This tutorial assumes that you have a hosting 
environment set up, running the latest version of PHP 
and MySQL. It also assumes that you are running the 
latest version of WordPress. If you are not, it may be 
worth upgrading before you proceed through the 
admin section of your site. 
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o Getting started 

The first thing you need to think about when 
creating a WordPress plug-in is file naming. Your file 
names need to be completely unique. This is so they do 
not conflict with any other plug-ins another user may 
already have installed on the server from a third party. 
For this tutorial it is best that you develop on a clean 
WordPress install. 


Creating a document 

Open Dreamweaver - or your text editor of 
choice - and create a new PHP file. Add the following 
opening and closing tags to the document. Now save it 
with the name ‘authorinfo.php' to the wp-content/ 
plugins/ folder of your clean WordPress install. 


@01 <?php 


3 ?> 


03 Adding plug-in information 

The following block of code will need to be added 
to our newly-created PHP file. This code has all been 
commented out, so in theory it should not be useful in any 
way whatsoever. However, WordPress uses this 
commented section to determine some key information 
about our plug-in. We will cover the GPL3 licence in the 
next step. 


<?php 
/* 
Plugin Name: Author Box WD201 
004 Plugin URI: http:// [Your plugin website 
here] 
Description: Add an author box to your blog 
Version: 1.0 
Author: [Your Name] 
Author URI: http:// [Your website here] 
License: GPL3 
*/ 
?> 


GPL3 Licence 

Underneath your comment code, add the 
following statement. This is customary content for a 
plug-in header, and good practice if you want to release 
your plug-ins to the rest of the WordPress community. 
The GPL3 license is a general public license that allows 
everyone to copy and distribute your work. Do not use 
this licence if you want to sell your plug-in. 


GOT /* copyright (C) 2012 [Your Name] 


003 This program is free software: you can 
redistribute it and/or modify 

004 it under the terms of the GNU General 
Public License as published by 

005 the Free Software Foundation, either 
version 3 of the License, or 

@@6 (at your option) any later version. 


~] BF Plugins mane 
] 
| ax) mea 


BuikAacions [i] | Apply 


E Plugin 


E) Akismet 
‘Activate | Edit] Delete 


Description 


Used by millons, Akismetis quite possibly the best way inthe world to protect your biog i 
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Version 2.5.6 | By Automatic | Visit plugin sil 


Author Box. 
Activate | Edit | Delete 


‘Add an author box to your blog 


Heno Dotty 


Activate Edit | Delete right of your admin screen on every page, 


Version 1.6 | By Matt Mullenweg | Visit plugin site 


Plugin 


Bulk Actions 


iai 
E) woy 


General 
Writing 
Reading 
Discussion 
Media 
Privacy 
Permalinks 
Author Box 


= This program is distributed in the hope 
that it will be useful, 

@@9 but WITHOUT ANY WARRANTY; without even 
the implied warranty of 

010 MERCHANTABILITY or FITNESS FOR A 
PARTICULAR PURPOSE. See the 

@12 GNU General Public License for more 
details. 

aiz 

013 You should have received a copy of the 
GNU General Public License 
014 along with this program. 
<http: //www. gnu. org/licenses/>. 


O15 + 
Verify your plug-in 


~ At this stage it is worth doing a quick check 
within WordPress to make sure that your plug-in 
information is being loaded correctly. Once you have 
updated your PHP file in the Plugin folder of WordPress, 
navigate to the Plugin menu within your WordPress 
admin section. If all has worked, you should see your 
plug-in listed. 


06 Adding settings 
Before we can add functionality, it is worth 
getting everything we need set up. Under your licence 


If not, see 


Version 4.0 | By Pete Simmons | Visit plugin ste 
‘This is not just a plugin, symboles the Nope and enthusiasm of an entire generation sur 
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comment, add the following code. This code will create 
a menu item for your plug-in, in the Settings tab of the 
admin section of WordPress. The author-box-settings is 
the name of the string that appears in the address bar. 


OT add_action( ‘admin_menu’, ‘authorbox_menu’ 
); 


| function authorbox_menu() { 

004 add_options_page( ‘AuthorBox Options’, 
‘Author Box', ‘manage_options', ‘author-box- 
settings’, ‘authorbox_options’ ); 


005 } 
07 Settings output 


Add the following function underneath the 
previous step. This will display some basic HTML in our 
settings page. Over the next step we will code a form 
for users to fill out information about the author of the 
blog. The previous step references this function when it 
adds the menu item so it is important that you ensure 
there are no spelling mistakes. 


function authorbox_options() { 
12 if ( !current_user_can( ‘manage_options’ ) 
Jat 
003 wp_die( __( ‘You do not have sufficient 
permissions to access this page.’ ) ); 


or Pimen itnn Smoon Opti A Imag We 
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} ý 
echo ‘<div class="wrap">'; 
echo ‘<p>We\'1l build a form here, 
promise!</p>' ; 
echo ‘</div>’; 
} 


08 Settings page titles 

Replace our placeholder echo statements from 
the previous step with the following code. You can see 
the <h2> tag is coded slightly differently to a standard 
tag. The reason for this is that the titles can relate to 
multiple settings tabs and it is good practice to learn 
how to code this way. 


QO echo ‘<div class="wrap">’; 
002 echo “<h2>” . __( ‘Author Box Plugin 
Settings’, ‘author-menu’ ) . “</h2>”; 


003 2> 
09 Adding a form 


The next step is to add our form that will allow 
us to input our author information. You will notice that 
the PHP tag was closed in the last step, we will now add 
a standard HTML form with the below code. 


BT <form name=“form1" method=“post” 
action=“"> 
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@02 <input type=“hidden" name=<?php echo 
$hidden_field_name; ?>" value=“Y"> 

003 

004 <p><?php _e(“Author'’s Name:", ‘author-menu’ 
4, > 

005 <input type="text” name="<2php echo $data_ 
field_name; ?>" value="<?php echo $opt_val_ 
name; ?>" size="20"> 

806 </p> 

007 <p><?php _e(“Author's Bio:", ‘author-menu’ 
J; 2> <br /> 

008 <textarea name="“<?php echo $data_field_bio; 
2>"_cols=“80" rows="8"><?php echo $opt_val_bio; 
?></textarea> 

009 </p> 

@1@ <p><?php _e(“Author's Picture:”, ‘author- 
menu’ ); ?> 

@11 <input name=“<?php echo $data_field_image; 
2>" type=“file” /> 

@12 </p> 

@13 <hr /> 

on 

@15 <p class=“submit"> 

@16 <input type=“submit” name=“Submit” 
class=“button-primary” value=“<?php esc_ 
attr_e(‘Save Changes’) ?>" /> 

017 </p> 

018 
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Adding form variables 

As you will notice from the previous step, we 
have added PHP variables in our form that make up 
both the input name and value. In between your die 
statement and your <dive class="warp"> element, place 
the following few lines of code. This code will set all the 
variables for the form name and values. If the values are 
set these will be overwritten. 


001 $opt_name = ‘author_box_name' ; 

002 $opt_bio = ‘author_box_bio'; 

003 Sopt_image = ‘author_box_image’ ; 

004 $hidden_field_name = ‘mt_submit_hidden’ ; 
005 $data_field_name = ‘author_box_name’ ; 
006 $data_field_name_bio = ‘author_box_bio’; 
OOT $data_field_name_image = ‘author_box_ 
image’; 


, Adding database options 
The following code will set up a new set of 
database fields in your WordPress options table. The 


register_activation_hook function only calls this function 
when the plug-in is activated for the first time. Add this 
code under your header section, and activate the 
plug-in to see the results in your database, by viewing 
the last three rows of the wp_options table. 


E function author_install() { 


add_option( ‘name’, ‘’, “°, ‘yes’ ); 
@@3 add_option( ‘bio’, °, ‘’, ‘yes’ ); 
@04 add_option( ‘image’, ©, °, ‘yes’ ); 


i 
007 register_activation_hook(__FILE__,’ author 
install’); 


, Getting existing options 

If you submit your options form now, you will 
notice that your wp_options table gets updated. 
However, the values are not being pulled into the form 
yet. So, this leaves you with blank fields when the page 
reloads, after the form is submitted. Add the following 
code just before your if statement within your 
authorbox_options function. 


601 $opt_val_name = get_option(‘author_box_ 
name’); 

@@2 $opt_val_bio = get_option(‘author_box_ 
bio’); 


003 $opt_val_image = get_option( ‘author_box_ 
image’) ; 


B Handling image uploads 

You may have noticed that our image upload 
element doesn't really do anything useful at the moment, 
apart from add the filename to the database that we set up. 
Add this code within your if statement. The code will check 
to ensure that a user is only uploading an image - nothing 
else - and it also adds a size limitation; change this to 
whatever you need it to be. 


001 $allowedExts = array(“jpg”, “jpeg”, “gif”, 
“png”) 
@@2 extension = end(explode(“.”, $_ 
FILES[$data_field_image][“name”})) ; 
003 if ((($_FILES[$data_field_image][“type”] 
== “image/gif”) 
004 || ($_FILES[$data_field_image][“type”] 
== “image/jpeg”) 
005 |1 ($_FILES[$data_field_image][“type”] 
== “image/pjpeg”)) 
006 8a ($_FILES[$data_field_image][“size"] < 
200000) 
&& in_array($extension, $allowedExts)) 

{ 

if ($_FILES[“file”][“error”] > 0) 

{ 


echo “Error: “ . $_FILES[$data_ 
field_image][“error”] . “<br />”; 


w 


else 


$upload_dir = wp_upload_dir(); 

move_uploaded_file($_FILES[$data_ 
field_image][“tmp_name”], $upload_ 
dir[‘basedir’] . “\\” . $_FILES[$data_field_ 
image] [“name”]) ; 


echo “Invalid file”; 


“m Fixing some errors 

As we've changed the way the code handles files, we 
now need to go ahead and update our form and update_ 
option values. You should update your form with the 
following line; this will allow us to upload the actual image data 
- in whatever file format it may be in - rather than just take the 
filename from the form. You can also delete the $opt_val_ 
image variable from within the if statement. 


j1 <form name=“form1” method=“post” action=“” 
enctype=“multipart/form-data”> 


EA Image in database 

If you now submit your form with an image, you 
will see the image appear in the wp-content/uploads 
folder. If you don't see it there, you may need to create 
the uploads folder and set permissions to 777. You also 
need to update the final update_option command to the 
following code - this code will add the full image path to 
the database. 


Ooi update_option( $opt_image, $upload_ 
dir[‘baseurl'] . “/" . $_FILES[$data_ 
field_image][“name"] ); 


16 Displaying an image 

lt would be a good idea to display the image 
within the settings page to provide some feedback 
when the form is submitted, You need to add this code 
within your form, updating the image upload field. This 
if statement will then pull the URL from the database - if 
there is one set. 


001 <p><?php _e(“Author'’s Picture:", ‘author- 
menu’ ); ?> <br /> 

<?php if (Sopt_val_image != ‘') { ?> 
a <img src=“<?php echo get_option($opt_ 
image); ?>" /> 

<p>Update image 

<Iphp } ?> 

<input name=“<?php echo $data_field_image; 
?>" type=“file” /> 
007 </p></p> 


7 Adding a sidebar 

Now that we finally have our options page 
completed, we can make a start on getting the plug-in 
output to do something to the front end of our site. The 
easiest way to do this would be to simply add the 
option to display the information in a sidebar. Add the 
following code to the bottom of your PHP to generate 
the sidebar output. 


function your_widget_display($args) { 
extract ($args) ; 
echo $before_widget; 
echo $before_title . 
$after_title; 
@05 echo ‘<img src=‘. get_option(‘author_box_ 
image’).'” style=“max-width:15@px” /><br />'; 
@@6 echo ‘<strong>’. get_option(‘author_box_ 
name’). ‘</strong>’; 
007 echo ‘<p>’. get_option(‘author_box_ 
bio’). ‘</p>’; 


B echo $after_widget; 
} 


1B Register the sidebar 

Now we have the code to display the output of 
the sidebar, we need to register it with WordPress. 
Adding the following code under the previous step will 
add the sidebar into the Widgets section of the 


‘About the Author’ . 


WordPress admin. You can now drag the widget onto a 
sidebar and see the results. 


001 wp_register_ 
sidebar_widget ( 


602 ‘author_box_ 

widget’, 
‘Author Box’, 
‘your_widget_display’ , 
array( 


‘description’ => ‘Display 
information about the blog author in your 
sidebar’ 


| 
3 


19 Adding shortcodes 

Shortcodes are an easy way to place an element 
within a blog post. This element is normally driven by a 
plug-in or theme. Adding the following code under the 
previous step will allow users to add author information 
anywhere in a post by simply typing “[authorbox]’. You can 
change the style of this as you see fit. 


function author_shortcode($atts){ 
E return ‘<strong>About the Author</ 
strong><br /><img src=“‘.get_option(‘author_ 
box_image’).’” style=“max-width: 150px” /><br 
/><strong>’ .get_option(‘author_box_name’).’</ 
strong><p>’ .get_option(‘author_box_bio’).’</ 
p>’; 
003 > 
add_shortcode( 
‘authorbox’, ‘author_ 
shortcode’ ); 


20 Auto redirecting 

Currently the user journey is very messy. They 
activate the plug-in, then visit the Settings page to add 
author information, manually. We want to redirect them to 
our settings page as soon as they hit activate on the Plugin 
screen. Scroll to the top of your code and then replace your 
author install function with the one shown below and also 
add an additional function. 


@@1 function author_install() { 


add_option( ‘author_box_name’, ‘’, ‘’, ‘yes’ 
); 
@@2 add_option( ‘author_box_bio’, ©, ‘’, 
‘yes’ ); 


003 add_option( ‘author_box_image’, ‘’, ©, 

tyes’ ); 

B add_option(‘activation_redirect’, true); 
3 


006 function plugin_redirect() { 
if (get_option(‘activation_redirect’, 
false)) { 


redirect’); 


delete_option(‘activation_ 
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Code library 
authorbox_options 
function in detail 


Our authorbox_options function is quite large, so we'll break it down to 
see exactly what is happening 


$adminUrl = admin_ur1(); 
wp_redirect ($adminUrl1.’/options- 
general . php?page=author-box-settings’); 


} 
} 


Activate the 


redirect 


Now it's time to call our redirect 
function and see it in action 
Add the following line 
underneath our 
register_activation_hook 
command. Now if you go 
to the Plugins page in your 
admin section, deactivate, 
and then reactivate the 
plug-in, you will be 
automatically taken to the 
Settings page. You will also notice our 
old data is still present. 


Unique 
plug-in names 


It is important to check 
that the name of your 
plug-in is unique. If it isn’t, 
the WordPress update 
feature could mean that 
your files are overwritten 
with someone else's. 


001 add_action('admin_init', 'plugin_ 
redirect’); 


22 Cleaning up 


From the previous step, you will notice that our old 
data was left behind once we deactivated our plug-in, this 
isn't great as it clogs up the WordPress database. Adding 
the following code will delete our plug-in data on 
deactivation. Add this underneath your activation hook to 
keep things neat. 


function author_deactivate() { 
delete_option( ‘author_box_name’, ‘’, 
2, ‘tyes’ ); 
003 delete_option( ‘author_box_bio’, ‘’, ‘’, 


‘yes’ ); 
004 delete_option( ‘author_box_image’, ‘’, 
2, ‘yes’ ); 


} 


register_deactivation_hook( __FILE__, 
‘author_deactivate’ ); 


deactivating the plug-in, all traces of data are removed 
from the WordPress database 
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function authorbox_options() { 
if ( !current_user_can( ‘manage_options' ) ) { 
wp_die( __( ‘You do not have sufficient permissions to 


The first thing our eae 
adada te access this page.’ ) ); 
check our user's 3 
permissions. 
Incorrect rights = ve 
anna thia code will 6 $opt_name = ‘author_box_name’ ; 
beterminated. } $opt_bio = ‘author_box_bio' ; 
$opt_image = ‘author_box_image'; 
$hidden_field_name = 'mt_submit_hidden'; 
@  $data_field_name = ‘author_box_name’ ; 
l $data_field bio = ‘author_box_bio'; 
$data_field_image = ‘author_box_image’ ; 
Gur veriebies areno a 4 $opt_val_name = get_option(‘author_box_name'); 
willbeused $opt_val_bio = get_option(‘author_box_bio’); 
throughout the code, i = ‘ 1. 
hance why wee Only $opt_val_image = get_option(‘author_box_image’) ; 
setting them once. 
if( isset($_POST[ $hidden_field_name J) && $_POST[ 
$hidden_field_name ] == ‘Y' ) { 
$opt_val_name = $_POST[ $data_field_name ]; 
Ereren  * tee a - 3 
Thehiddentieldis ð Sopt_val_bio = $_POST[ $data_field_bio J; 
used to seeifdatahas 
been sent tothe form. $allowedExts = array(“jpg", “jpeg”, “gif”, “png”); 
ose $extension = end(explode(“.", $FILES[$data_field_imagel 
[“name”])); 
if ((($_FILES[$data_field_image][“type"] == “image/gif”) 
Thenextchunkof || (S_FILES[$data_field_image][“type”] == “image/jpeg") 
code handles the || (S_FILES($data_field_image]{“type”] == “image/ 
Ro delet pjpeg")) 
restrictionson the ia i 
file typeare placed && ($_FILES[$data_field_image][“size"] < 200000) 
heretoprevent && in_array($extension, $allowedExts)) 
malicious uploads. { 
if ($_FILES[“file"][“error"] > 0) 
{ 
echo “Error: " , $_FILES[$data_field_image][“error”] 
. “br />"; 
} 
else 
{ 


$upload_dir = wp_upload_dir(); 

move_uploaded_file($_FILES[$data_field_image][“tmp_ 
name"], $upload_dir[‘basedir'] . “\\" . $_FILES[$data_field 
-image][“name"]); 


a 3) 
} 
else 


{ 
= echo “Invalid file”; 


Thebest Author 
Box options 


Author boxes provide an excellent way of 
increasing engagement with website visitors 


bries, an aborted 1990s low-budget film, and the studio motion pictures Fantastic. 
1d Fantastic Four: Rise of the Silver Surfer (2007). 


Invisible Woman 


1 am Susan "Sue" Storm Richards (also known as invisible 
later invisible Woman) is a fictional character, a superheroi 
appears in comic books published by Marvel Comics, a foul 
member of the Fantastic Four. Created by writer Stan Lee 
artist/co-writer Jack Kirby, the character first appeared in Fi 
Four #1 in November 1961, and was the first female super 
created by Marvel in the Silver Age of Comics. 


WP About Author 


With one settings page you can optionally 
display your author box on your front page, in 
and RSS 


ia links are displayed as icons. 


archives, search results, posts, page: 
feeds, Social me 
The box itself can be customised by changing the 
background colour and by choosing between a 
thick, thin or no line above the box 


ntastic Four have been adapted into other media, including four animated television] 
‘an aborted 1990s low-budget film, and the studio motion pictures Fantastic Four (20 
astic Four: Rise of the Silver Surfer (2007). 


About The Thing 


The Thing has written 1 post in this blog. 

1 am a founding member of the Fantastic Four and was created by Jack Kirby 
Stan Lee and made my first appearance in The Fantastic Four #1 (Nov. 1961). 
trademark orange rocky appearance, sense of humor, blue eyes, and famous 
battle cry, "It's clobberin’ time!" make me one of the most recognizable and 
popular comic book characters. My speech patterns are loosely based on tho 
Jimmy Durante, 


View all posts by The Thing» Blog Twitter | Facebook | Google+ 


red in Author Box Showdown on Novembe 


Better Author Bio 

This author box has one settings page and 
allows for bio positioning at the top or bottom of the 
post, or manually positioning using a shortcode 
There are settings to optionally display the author's 
Gravatar, bio text and numbe r of posts. You can 
customise some of the text that appears on the box 
before the author's name and around the number of 
posts. There’s a link to display all of an author's posts 


and text links for social m 


je Fantastic Four have been adapted into other media, including four animated television 
Fees, an aborted 1990s low-budget fim, and the studio motion pictures Fantastic Four (2008) 
nd Fontastic Four: Rise of the Silver Surfer (2007). 


About Human Torch 


1 am a fictional character, a superhero who appears in comic books 
published by Marvel Comics, a founding member of the Fantastic 
Four, Created by writer Stan Lee and artist Jack Kirby | first appeared 
in The Fantastic Four #1 (cover-dated Nov. 1961). A similar, 
unrelated character of the same name and powers had been 
created in 1939 by wrter-artist Carl Burgos for Marvel Comics! 
predecessor company, Timely Comics. 


Mail | Web | Twitter | Facebook | More Posts (1) 


WP Biographia 

This plugin is actually based on WP About 
Author by Jon Bishop but then hugely extended 
There are five pages of settings, and a reset option in 
case you lose track of all those customisations and 
need to start again. This plugin particularly lends itself 
to use on a multi-author site and feels like a premium 


plugin that just happ to be free. 


Your theme may of course already come 
complete with an author box but if you find it 
doesn't give you the functionality you require, 
or you just don't like the look of it, you will be 
sure to find dozens of alternatives that may 
better meet your needs. 

Author bo are essential for multi-author 
sites but even single-author sites will benefit 
from the interactively they support 

Normally appearing at the bottom of a post, 
author boxes offer a timely opportunity for your 
readers to connect with you so social media 
links often feature prominently in them. Your 
reader may also be interested to find out what 
else you have written so many author boxes 
provide useful links to your other posts. 

All of the author boxes here are simple to use 
so the key factors to consider are which ones 
provide the functionality and options you need 


and which ones do you like the look of be: 


WP 
Biographia has 
five settings and 
a reset option. It 
feels likea 
premium plugin 
that just 
happens to 
be free 4 


for ts recurring encounters with characters such as the villainous monarch Doctor Doom, the 
planet-devouring Galactus, the sea-dwelling prince Namor, the spacefaring Silver Surfer, and 


the shape-changing alien Skrulls. 


The Fantastic Four have been adapted into other media, including four animated television 
series, an aborted 1990s low-budget fiim, and the studio motion pictures Fantastic Four (2005)| 
and Eantastic Four: Rise of the Sliver Surfer (2007) 


WD Twitter fFacebook Gj Googles [M Linkedin] Latest Posts 


Mr Fantastic 
Bk superhero a Farts Four 
1 am a fictional character, a superhero who appears in comic books published 


by Marvel Comics, He is a founding member of the Fantastic Four. Created by 
Writer Stan Lee and artist/co-plotter jack Kirby, the character first appeared in 
Fantastic Four #1 (November 1961). 


Fanciest Author Box 

This is the only non-free plugin here but at 
only $10, it 
the author's ç 


a snip. There's an option to either us 
avatar or link to an image URL. We 
particularly like the tabbed approach for providing 
links to social media and previous posts which helps 
to keep the height of the author box to a minimum. 
There's a reasonable range of options split across tw 


settings pages and the ability to change colours 
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| Tips “Noo 


Apply individual “isme” 


Fashion has its own persona, and inevitably 


e 
| a rather subjective nature, but the 
S QS O Ji ] | S | presentation of fashion and its associated 
products, especially on the web, often 


4 follows the rule of less is more. This helps to 
inspiration bree.com create an air of elegance on a website and 
allows designers to strategically place 
inimally designed and subtle tones interspersed with well 

sites that utilise constructed and well-shot imagery. It offers 
lighter coloured splashes of colour with its product shots, but 
backgrounds tend also adds subtle tones via its navigation menu. 
to lend themselves The hover effect is called into action, switching 


product photos so that they offer 
maximum impact. In this case, fashion is 
the product so that is the key feature that 
the site needs to showcase. Bree adheres 


to this format very well indeed and 


to splashes of from a standard background shade to a complements the style and photography 


colour and block of colour with a change of text with a contemporary, rounded font in the 

well-procured colour. Nothing particularly radical, Transparency form of Pluto Sans. Bree makes great use 

photography. This but where it gets interesting is that Elements of the product of the Extra Light option, using 

adds style, which in each has a different colour shots in the image slider upper-case characters In order to 
turn adds interest to a page. The Bree site pulls background when the hover overlay the element in emphasise the important headlines 


off this technique well with plenty of white space state is called into action. which they're contained and keep the typography clean 
with the help of a 
transparent PNG image 


a 


EUR 0,00 


~ Menu opacity 
The menu inthe 
top-right corner, with 
icons, uses RGB 
opacity to make the 
links grey. On rollover, 
the opacity is removed 

yi to reveal the icon’s 


ENTHUSIASTIC a 
ABO UT z Search style 


The default styling for 


IM PECCABLE the search field is 


subtle and fits in 
DESIGN ’ : perfectly with the 
overall design ethic. 
On rollover the 
background 
transforms to white 
with a border for 
added emphasis. 


COLLECTION BREE WORLD 


Show and hide 
The main menu uses 
nth-child rollover 
effects (see technique), 
BREE STORES and when onclick is 
activated, a submenu 
slides into view and 


Fade effect Border effects Image slider toggles between being 
A translucent white cover is called What’s Hot uses a border effect on The image slider uses a centrally visible and hidden. 
into action when the cursor is placed rollover to emphasise the currently placed image set to a fixed width. The 


SPORTSWEAR 


on the box. The color property and selected product. A subtle grey is slider controls are responsive, sitting at 
the RGB settings have been adjusted used to keep with the toned-down the edge of the browser window - both 
to create this effect. ambience of the site. left and right. 
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White space and great photography 
“The minimalist nature and great use of white space are two key elements 
Ù found on a lot of eCommerce sites. This focuses the user's attention on the 
core subject of the site - the product. The Bree site does a great job of utilising 
<comment> | these elements and adds in great product photography and subtle tones to 


peti | complete the experience.” 


ofthesite | Steve Jenkins, Web Designer features editor 


TECHNIQUE 


Create custom colour links with nth-child 


Create navigation 


The first step is to create the navigation system 
to be used on the site. For this, the <nav> tag will be 
employed. Add a set of opening and closing <nav> tags. 
Now populate the menu with the necessary text for the 
links. Wrap each link in an <a> tag and use the hash 
symbol to create an active link that does not redirect. 


1 <nav> 
<a href=“#>NEW</a> 
<a href=“#”>LADIES</a> 
4 <a href=“#”>MENS</a> 
<a href=“#”>COLLECTION</a> 
</nav> 


02 Styling <nav> tag 

The navigation system is going to include a top 
and bottom border and will define the font size and 
weight, plus any margins and padding. To save on 
space and add more efficient CSS, use the shorthand 
option, The font size has been set to 32px, but this can 
be modified to suit; the weight has been set to 200 to 
make it as light as possible. 


nav { 
2 margin: 10px; 
float: left; 
font-size: 32px; 
font-weight: 200; 
padding: 10px; 
border-top: 1px solid #EEE; 
8 border-bottom: 1px solid #EEE; 
ia 


FASHION 


NEW LADIES | MENS| 


Bespoke link colours 
Employing the nth-child selector allows the links 
to have individually coloured hover-states 


Style links 

The next step is to style the links inside the 
<nav> tags. By default, active text links are assigned an 
underline; to remove this, the text-decoration value is 
none. To space the links evenly a right margin is added. 
Adjust the size to suit the navigation system. Finally, 
apply padding to expand the link (use the same as for 
the <nav> tag). 


nav a { 

margin: Opx 20px @px px; 
text-decoration: none; 
color: #999; 

padding: 10px; 

} 


Text colour 

The text colour is determined via the ‘nav a’ 
selector, This is the colour that is used when a link is ina 
non-active state, As a hover background colour is going 
to be used, the text needs to be modified to work 
effectively on a darker background, For this the link 
hover state has the colour text set to white. 


nav a:hover 
{ 
color: #FFF; 
} 


05 Individual background colour 
To create a different background colour for each 
link, nth child is needed, The property will need to 
include the parent element and the link hover option 
with nth-child added. The number in the nth-child 
relates to each link, with the first being number 1, the 
second link being number 2, and so on. To complete 
the styling, pick the desired colour code. 


nav a:hover:nth-child(1) { 
background: #f fc6a; } 
nav a:hover:nth-child(2) { 
background: #d5b692; } 
nav a:hover:nth-child(3) { 
background: #394a97 ; } 
nav a:hover:nth-child(4) { 
background: #6f7072; } 


TECHNIQUE 


HTML5 form 
validation 


HTMLS has added a whole new selection of 
input types for forms. These give better 
input control and validation and include 
date, time, email, telephone, URL and 
placeholder. This also cuts down on code 
and works on mobile. 


SEE WHAT YOU CAN FIND 


Start searching, 


Placeholder text 

HTMLS introduced a number of new 
input types for forms that help cut down on 
code and validation. Placeholder text is the 
text that appears inside an input field, such 
as ‘Type here’ or ‘Start searching’. 


<h3>SEE WHAT YOU CAN FIND</h3> 
<p>cirput type="text” plocweldens"Start searching. .."/></p> 


Add text 

The input type for placeholder text is 
the popular choice for adding text. Add the 
following code. 


O01 <input type=“text” 
placeholder=“Start 
searching...”/></p> to add the 
placeholder text. To style 
simply include input {} and do 
as you would with standard 
css. 


Placeholder fallback 

Some older browsers do not support 
HTMLS5 placeholder text. To compensate for 
the lack of support and provide fallback, use 
Placeholders,js - an HTMLS5 polyfill that 
doesn't require jQuery. Get more info at 
bit.ly/HdUMaD. 
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Set up your own renee wey 


The cover image of the online magazine is 


e e 
designed so that it uses the full height of 
O | ] |e ] | | qd d / i Kor the browser window. This means that when 
it's experienced on large, desktop displays it 


: 3 ; ° sits side-by-side with the magazine's 
| NSPI ratio n www.la monda magazıi ne.com content. However when the site is accessed 


on smaller screen sizes the cover fills the 


a Monda magazine is an magazine cover is situated on the left-hand side screen. By using the height of the browser 
online Spanish publication of the page with the blog on the right. If the it dynamically scales to the correct size and 
which focuses on style, user rolls over the cover, the contents are therefore doesn't take over by being a fixed 
trends and fashion with a displayed, such as interviews, events and width on smaller-screen devices. This is a 
quirky edge. As is the norm exclusives. When the screen is very wise use of space and shows that the 
in this day and age, the experienced on a smaller scale, for Fad ing cover magazine's designers have thought 
magazine is a beautiful example on a tablet, the cover is carefully about the solution for all screen 


As the site content loads, 
the cover fades in. The 
user is kept informed with 
a loading animation and a 
tiled background image 


example of responsive design displayed first, then the contents, 
that fits a variety of screen then the rest. A beautiful 
sizes. On a large screen, the example of responsive design 


resolutions and how the experience will 
be interpreted by each and every user. 


qué ES LA MONDA? CONTAIBUIR EQUIPO contacto NOS EN/ES 


LA MONDA 


REVISTA N°1 


BLOG/D, 


MODA / GRAFICO / FOTO / PRODUCTOS Y 


SICA / VIDEO / ARTE / FREAK! 


ABRIL 2015 


MARZO 2015 


Cover display Full height Magazine content Loading up Scroll to enjoy 

The magazine cover is The magazine cover The contents of the magazine is The magazine cover fades in The content on the right 
displayed on the left-hand is set to fill the full displayed when the user rolls over when all the content for the canbe scrolled down to 
side of the page. This height of the the cover, on touch-screen devices page has preloaded. A loading explore the blog in full and 
remains fixed in place browser window in this is displayed below the cover as animation informs the user contents of the magazine 
while the blog scrolls. all-sized screens. there is no rollover available. while the content loads. articles and features. 
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| Handling an online magazine 
“The problem [with] designing an online magazine with issues and a blog 
| (necessary for organic traffic) is the navigation between them. We solved this 
i by dividing the screen into two vertical panels, keeping the magazine fixed and 
<comment> | simulating printed magazine elements (cover and index) so even though you 


What our 
experts think 


scroll within the blog, you'll always access the last issue's content.” 


of the site Ernest Rupérez, co-founder and art director of Sweet Homes 


TECHNIQUE 


Create the fixed sidebar 
o Setting up the document 


Create a new html document and in the head 
section add the code as shown below. Here we are 
linking up to the jQuery library which will fade in the 
content on the left-hand sidebar. We then add some 
base styling for our paragraph and body tags in the 
html page. 


@01 <script src=“http://code. jquery. 
com/ jquery-1.7.2.min. js”></script> 
@02 <style> 

003 p{margin:0;padding: 0} 

04 body {margin: @px;} 


6p Left-hand side 

Next we add CSS code for the panel that will sit 
on the left-hand side of the screen. We give this a 
background colour so that we can see it differently to 
the rest of the content. The whole left-hand side is made 
to fit the height of the document and the width is set at 
a fixed 500px. 


001 #side { 

002 color: #FFF; height: 100%; 
003 width: 50@px; position: fixed; 
004 background-color: #9CC; 

005 } 

006 #left { 

007 display: block; width: 500px; 
008 text-align: center; padding-top: 
300px; 

009 display: none; 

010 } 


Fading and scrolling 
The left panel is fixed while the right scrolls. The 
content on the left fadesin as the content loads. 


03 Right-hand side 

n We now add the CSS code for the article content 
that will be on the right-hand side of the screen. We set 
it's height at 1200px just to show that this side scrolls, 
you would not have to do this if populating with real 
content. We position this absolutely then we can move 
it over to the right by 500px. 


001 article { 

@02 display: block; height: 1200px; 
003 padding: 100px 2@px 2@px 50px; 
004 position: absolute; left: 500px; 
005 } 


006 </style> 


Eà Text colour 

` The text colour is determined via the ‘nav a’ 
selector. This is the colour that is used when a link is in a 
non-active state. As a hover background colour is going 
to be used, the text needs to be modified to work 
effectively on a darker background. For this the link 
hover state has the colour text set to white. 


O01 <div id=“side”> 

002 <header id=“left”> 

003 <h1>Static Sidebar</h1> 

004 <p>Here is the text description.</ 
p> 

H- </header> 

007 </div> 

008 <article id=“right”> 

009 <p>This is where the next section 

would go. </p> 

01 </article> 


o5 A little jQuery 

“= Place the jQuery code directly under the html. 
This just states that when the document has finished 
loading, fade in the content with the identity of ‘left’. This 
will be done over 1.5 seconds. Then save and test. 


<script> 
$(document).ready(function () { 
003 $(‘#left’). fadeIn(1500) ; 


004 3); 
005 


</script> 


Create a diagonal- 
line texture 


The left panel contains a diagonal line 
pattern that is very easy to recreate in 
Photoshop. Here we explore how to create a 
repeating pattern that can be used as a 
background image in CSS for the panel. 


Anew document 

Open Photoshop and create a new 
document that is 5px by 5px in size. Make 
sure the background in set to transparent 
and then click OK to create the document. 
Zoom in to 3200% so that you can see the 
pixels clearly. 


Increase the canvas 

Switch to the Pencil tool, which by 
default is under the Brush tool, so click and 
hold until you can select it. Make your 
foreground colour black and then click each 
pixel to create a diagonal pattern as shown 
in the screenshot. 


Save for Web 

Choose the Save for Web option 
from the File menu and in the pop-up 
window choose transparent PNG. Then save 
this to the images folder of your web site 
ready for incorporating into your CSS. 
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Make the 
most of 
HTML5s 
localStorage 


Learn how to use HTML5s new 
method to store data locally 


tools|tech| trends HTML5, CSS , jQuery, JavaScript 


Create your HTML 
For this tutorial we will simply need a single HTML file with some simple 
styling. Remember to include jQuery as this will make life easier later in the 
tutorial. Make sure you dynamically include it from an external server to save 
your own overheads. 


001 <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” 
“http: //www.w3.org/TR/html4/loose.dtd”> <html> 

<head> 

002 <meta http-equiv="Content-Type” content=“text/html ; 
charset=ISO-8859-1”"> 

<title>Local Storage Tutorial</title> 

<link href=“style.css” rel=“stylesheet” type=“text/css” /> 

003 <script type=“text/javascript” src=“http://ajax.googleapis. 
com/ajax/libs/jquery/1.4.4/jquery.min, js”></script> 

</head> 


02 Give the page some style 

We are mainly interested in how the JavaScript API works with 
localStorage, but hey, everyone likes a bit of colour right? So lets introduce 
some style to our page. 


Build a form 

Okay, there are some important things to mention here. Note the ID of 
the form. This will be used later when we want to find out what fields are 
contained within the form. We also have an empty div with an ID of message. 
This will be used when we want to tell the user we have stored data. 


<form id=“localStorageForm” method=“post” action=“"> 
<label>First Name</label><input type=“text” 
id=“firstname” name=“firstname” value=“” class=“input” /> 
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*localstorag 
index.html 


+ localstorage/ uses a key/value paired system for storing the data, One 


style.css 


'm sure you have all heard about how 
great HTMLS5 is, but how familiar are you 
with one of its awesome features, 
localStorage? It's been around for a while, 
but many websites and web applications 
seem to be reluctant to adopt this new 
functionality. LocalStorage allows any web 
application to store data within the 
browser and retrieve it seamlessly, even if 
the browser is closed and restarted. Many 
of you may now be thinking, ‘hmm isn't 
this the same as cookies, which have been around since 
the dawn of the internet?’ The answer is no. 
LocalStorage is in fact very different. For starters it 
typically allows for a whopping 5MB of storage space 
per domain and is primarily used only at the client side. 
Cookies are sent in the headers of an HTTP request and 
are usually used server-side. Plus, localStorage data 
never expires unless the browser cache is cleared, It also 


of many ways you could implement localStorage is by 
saving form data as the user enters it. Imagine you have 
a multi-page form which may take a while to fill out - if 
the user were to go away, restart the browser and return 
to the form, it could remember all the data previously 
entered, thus increasing conversion rates. 


<label>Surname</label><input type=“text” 

id=“surname” name=“surname” value=“” class=“input” /> 
<label>Email</label><input type="text” id=“email” 
name=“email” value=“” class=“input” /> 
<label>Telephone</label><input type="text” 
id=“telephone” name=“telephone” value=“” 

‘lass=“input” /> 

<input type=“submit” class=“submit”> 

/form 


o4 Browser support 


So which browsers actually support local storage? Well its the same 
story with many of HTML5's new features, which means pretty much every 
modern browser - and that even includes internet explorer! Here is the 
breakdown: Internet Explorer 8+, Firefox 3.5+, Safari 4.0+, Chrome 4.0+, Opera 
10.5+, IOS 2.0+, and Android 2.0+. 


Browser Fallback 


It is more than likely that there will be a whole range of users visiting 
your website, so it is important to cater for everybody's needs, You must 
remember that not everyone is savvy enough to update their browsers so 
they will need to make sure you have considered these people too when using 
new technologies. An easy way of detecting whether a user has the ability to 
use localStorage is simple. The code below will allow you to test if the browser 
has localStorage capabilities. 


@@1 function hasLocalStorage() 
{ 


if (localStorage) 
return “Local Storage: Supported”; 
else 


<Above> 
+ The form is created using standard HTML tags including <form> and <label>, Users 
can add fields and modify labels to create a custom form 


» This simple form demonstrates how to add data for storage. The empty fields will 
need to be populated with data for localStorage to work 


004 return “Local Storage: Not Supported”; 
} 


06 Store some data 

“== We want to save the user's input as they begin to complete the form. 
An easy way to achieve this is to use jQuery to detect when a keyup action 
occurs. Then we can start assigning data to a unique identifier (known as a 
key) for each form field. We can do this by giving every form field a class called 
‘input’ and listening for a keyup action on anything that has that class 
associated with it. Once we have detected some input from the user we can 
start storing some data. 


Q1s¢‘. input’). keyup(function Of 

002 localStorage.setItem(“savedData”, “true”); 

003 localStorage[$(this) .attr(‘name’)] = $(this).val(); 
D; 


How it works 

LocalStorage is basically a persistent key-value store within the browser. 
It has a full JavaScript API to set/get/remove data and events to track changes. 
We just created a key and assigned some data to it. Its that simple! You can do 
this by typing literally one line of code: 


localStorage.setItem(“mykeyname”, “This is my stored data”); 
= if you then wanted to retrieve the data we saved, and store it 
in a variable for later use, you could do so by simply writing: 
003 var mydata = localStorage.gettem(mykeyname) ; 


08 Naming your keys 

Deciding what to name your keys can be a very important factor. Key 

names such as ‘name’ or ‘email’ can be a bit too common and lead to 

confusing results. Including a prefix that relates to your site can be a good idea. 

| would suggest something like: re-email or re-name. This will make it a lot | 
easier to handle and clear your data. 


09 Overwriting keys 

Another helpful feature when using localStorage is the way it allows you 
to overwrite the value associated with a key using the same method it was 
created with in the first place. This is nice to know as you don't have to worry 
about any errors being thrown. Be careful though, as it is easy to overwrite a 
keys value when using localStorage on different sections of your site. Make 
sure every key has a unique name otherwise you may get unexpected results. 
When getltem0 is called with a non-existent key it will simply return null rather 
than throw an exception. 


Reading stored data 


Reading stored data is just as easy as saving it. Because we have given 
our form an ID of localStorageForm, we can use this to our advantage by using 
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<Above> 
+ Every time we press a key the data entered is then stored. A flag is also set to make a 
notification to the user that data Is available should they close the window and return 


This form has saved data! 
firstname = Richard 
surname = Elliot 

email = rich@hotmail.com 


telephone = 01202 656097 


Richard 
Elliot 
rich@hotmail.com 


<Above> 
+ If data is entered and the window Is closed then re-opened, the form should 
automatically display the stored data 


jQuery's serializeArray function. A new array will then be created and each 
array key will have the same name as each of the form elements. This makes 
life easy, as we know that each localStorage key name already matches that of 
the form fields. 


var data = $(“#localStorageForm”).serializeArray(); 
$.each(data, function(i, obj) { 
$(“Cname=’” + obj.name +”’]”).val(localStorage.getItem(obj. 
name)) ; 
D; 


Adda Clear data button 

Not only do we want to store data, but we may actually wish to delete it 
too. This can be done by adding a button that calls a JavaScript function to 
clear any stored data we already have. This can be achieved using the 
localstorage.clear();. 


$(‘#clearData’).click(function() { 
localStorage.clear(); 
window. location. reload() 


D; 


Use caution 

It is worth noting that using the clearQ function will wipe all stored data 
associated with the domain it is called from. There may be times where you 
want to remove a piece of data from a specific key. This can be done using the 
remove key method. 


001 localStorage.removetem(mykeyname) ; 
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B Test your code 


Now we have code in place that will handle storing the data, we can 


start to fill out our form fields. Note that every time you press a key the name 
of the form element you are tying data into is recorded as the localStorage key 
name. The value then assigned to this key is the value of the form element. 
This value is updated every time you press a key. 


, Feedback to the user 


Remember that empty div with the ID of message we included above 
the form? We can now populate that div with a message to the user to let them 
know that the page they are currently visiting has previously saved data. The 
message we have used is ‘This form has saved data!’ as you can see from the 
image above. However, the message can be customised to say whatever you 
choose. We can detect whether or not we have saved data by checking if a 
value has been assigned to the savedData key. 


Show your saved data 
5 Okay, lets retrieve the saved data by looping over each form field to see 
if there is a localStorage key with the same name. If there is, then we can build 
a string that will include this saved data and output it to the screen 


@01 if (localStorage.getItem(“savedData”) == “true”) 

{ 

002 var data = $(‘#localStorageForm”).serializeArray(); 
@03var savedData = ‘<p>This form has saved data!</p>’; 
@04$.each(data, function(i, obj) { 

O05iF (localStorage. getI tem(obj.name)) 

{ 


u 


@6savedData = savedData + ‘<p>’ + obj.name + ‘ 
7+ localStorage.getItem(obj.name) + ‘</p>’; 
} 
yD; 
@O8document.. getElementById( ‘message’ ). innerHTML 
} 


16 Give ita go 

s Now that we have a way of telling the user if we have previously stored 
data available, we can test out the form. Try typing some data into the form, 
then close and re-open the browser window. Voila! You will see that the form 
automatically loads the saved data and the message div container above the 
form displays what you had entered! 


Other uses 


In essence you could use localStorage every time you need to save the 
current state of a webpage. You may want to save the state of your widgets 
and in theory you could store entire blocks of HTML. Many applications allow 
you to save their current state so it is good news that websites can now follow 
suit. Mobile devices can benefit from this technology as they often suffer from 
connectivity issues, meaning that data no longer has to be lost. 


savedData; 


Final words 

It is important to remember that localStorage is not a replacement for 
cookies. Yes, cookies have their limitations (the 4KB maximum storage size 
being one of them), but they will continue to be a critical part of your web 
applications despite the introduction of this newer technology. It is important 
not to be put off of embracing these new technologies that we are presented 
with, as that will only slow the evolution of the web, Instead, why not start using 
these little handy functions next time you are building something or working 
on a project. This is result in a more feature-rich user experience for your users, 
which can only be a good thing 


I’ve seen the 


FUTURE 


It’s in my 


BROWSER 


Code library 


Form building 


Use HTML to create the form and enter details, before adding the script 


The stored data will 
need tobe displayed 
somewhere. The 
placement of this div tag 
means thatit appears 
above the form. 


The formisa tool to input 
data. In typical form 
building fashion, the form 
willusea selection of 
labels, text fields anda 
submit and clear button. 


Toseeif wehaveany 
stored data, grab the form 
fieldnames and put them 
intoanarray. 


Wecan loop through 
each oneand check 
against the localStorage 
key names, which we 
knoware thesame. 


<div id=“message”></div> 
2 <div class=“formContainer”> 
<div class=“layout”> 

<form id=“localStorageForm” 
method=“post” action=""> 
005 <label>First Name</label><input 
type=“text” id=“firstname” name=“firstname” 
value=” class=“input” /> 
006 <label>Surname</label><input 

type=“text” id=“surname” name=“surname” 

value=“” class=“input” /> 
007 <label>Email</label><input 
type=“text” id=“email” name=“email” value=” 
class=“input” /> 
008 <label>Telephone</label><input 
type=“text” id=“telephone” name=“telephone” 
value=“” class=“input” /> 
009 <input type="submit” 
class=“submit”> 

</form> 
010 <input type=“submit” value=“Clear 
Data” class=“submit” id=“clearData”> 
ði </div> 
012 </div> 


</body> 


script type=“text/javascript”> 
$(document).ready(function () { 
function loadData() { 
// grab all the form fields and put 
into an array 
var data = $(“#localStorageForm”) . 
serializeArray(); 
018 // Loop through form field array 
019 $.each(data, function(i, obj) { 
020 


$(“Cname=’" + obj.name +” J”). 
val (localStorage.getItem(obj.name)) ; 
021 H; 
022 } 
= loadData(); 


025 $(‘.input’).keyup(function () { 

// save a flag to let the user know 
there is saved data 
027 —_localStorage. setI tem(“savedData”, 
“true”) ; 


//Store the data 
localStorage[$(this) .attr(‘name’)] = 
$(this).val(); 


D; 
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Tis Xe 


Builda Linux 
server with 
Open-source 
software, part1 


Repurpose that old PC in the corner 
and turn it into your very own 
development or staging server 


tools |tech| trends Ubuntu Server 


Download Ubuntu 


“=” To begin, head over to monkeh.me/2513w to download the latest copy 
of the Ubuntu Server edition. You can choose between either the latest 
version or the latest long-term support edition. Burn the ISO image onto a 
CD-ROM, which you will need to use as a bootable media disc in your 


soon-to-be new server. 


jann ommen arnt ana animal 
res sores 
Download Ubuntus Server 

For the latest Features, 
choose Ubuntu Server 
nem on 

6 Start install 

= Ensure the server is connected to your home network - it will need 


access for updates during the installation. Insert the disc into your machine 
and begin the installation process. Select your preferred language and 
territory, then either have the keyboard layout detected automatically or select 
the layout yourself from a pre-defined list. 


ubunt 
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+Step code 


pcycle - it’s one of those buzz 
words that we hear a lot. 
If you have access to an old 
desktop machine that's lying 
around at home, which you no 
longer use but don't want to 
throw away either, then why not 
upcycle it by converting it into 
your very own staging server, 
complete with the full LAMP stack? 

Not only is it great for the environment (lets face it, 
there's only so much time before landfills become 


land-full), but it is also a great way to teach yourself 
some new tricks, while saving you money on buying 
something straight out of the box. 

In the first part of this tutorial we will install the 
open-source Ubuntu Server operating system onto the 
machine, set up the new machine on the local network, 
and install Apache, MySQL and PHP5. We'll also add 
some extra security to the server and Install a firewall 
with specific access rules to the ports we need. Later 
we'll finish by adding multiple virtual hosts, continuous 
integration, and shell scripts to enhance your workflow. 


Set hostname 

Enter your preferred hostname for the server for easy identification on 
your network. In this instance we're using dev-server. Continue and enter your 
full name to create a new user account, followed by the user name (typically 
your first name in lowercase). Finally, set a password for your user account 
and proceed 


TI] Configure the network 
Please enter the hostname for this system, 
The hostname is a single word that identifies your system to the network, If you don't 
know what your hostname should be, consult your network administrator. If you are setting 
up your oun home network, you can make something up here. 
Hostname: 


<60 Back> <Cont inue» 


64 What time? 


Choose whether or not encrypt your user's home directory on the 
server and proceed. You can now choose to alter the time zone for your 
server if you wish - the default is detected using your network connection. For 
sanity’s sake, it's best to set it to your actual time zone - this will help when 
reading log files and reports. 


TH Configure the clock 
Based on your present physical location, your time zone is Europe/London. 
If this is not correct, you may select froma full List of time zones instead. 
Is this time zone correct? 


<Go Back> 


TH) Set up users and passwords 


A good password will contain a mixture of letters, numbers and punctuation and should be 
changed at regular intervals. 


Choose a password for the new user: 


<Cont inue> 


o5 Disk partition 


The installer will now give you options to partition the disk (assuming 
the drive is already formatted with another operating system). We want a 
clean server without partitions, so select the guided partitioning and use the 
entire disk. Confirm the disk selection and review the formatting changes. 
Once youre happy, continue to start the partition process, 


[iI Partition disks 
The installer can guide you through partitioning a disk (using different standard 
or, df you prefer, you can do it manually. With guided partitioning you will 
still have a chance later to review and customise the results. 


TE ey ch hoces guided partitioning for an entire disk, you will next be asked which disk 


Partitioning method: 


Guided ~ TORRE 


Guidad = bea entire disk eed sot w ircnoted LW 
1 


o6 HTTP proxy 

The installer will now give you the chance to set up any required HTTP 
proxies for external access. If your server needs one to access the web, make 
sure you enter the details here, otherwise you can safely skip this option. 


E!) Configure the package manager 


If you need to use a HTTP proxy to access the outside world, enter the proxy information 
here. Otherwise, leave this blank. 


proxy information should be given in the standard form of 
Tass 47 {user} (:pass) @) host [:port)/". 


HTTP proxy information (blank for none): 


_ foes Ts 


O01 HTTP/ACCEPT net $FW 


OOl SSH/ACCEPT net $FW 


OOL ACCEPT net $FW tcp 10000 


THT Software selection 


At the moment, only the core of the system is installed. To tune the system to 
needs, you can choose to install one or more of the following predefined Collect lons of 
software. 


Choose software to install: 


08 Core packages 

We can now choose the base packages for our server. Select an 
option using the Space key to set the asterisk next to it. Choose the OpenSSH 
server and LAMP server at the minimum. You can always install any other 
packages you may like to use once the server is up and running. 


Security updates 

We want our server to be up to date with the latest system security 
patches at all times. In this instance, choose to have the security updates 
automatically installed. The update processes themselves are fairly 
unobtrusive and pain free, unlike some other operating system updates. 
Proceed to the next step. 


1 [H Configuring mysal-server-5.5 


While not mandatory, It is highly recomended that you set a passuord for the HySaL 
administrative "root" use 


If this field is left blank, the password will not be changed. 


New password for the Mysal "root" user: 


eA SSE ea NE SS SMES SERIE RT| 
MySQL admin 


al As part of the LAMP stack, we need to set the password 


authentication for our MySQL admin user. Try to make this a different 
password from the user we created earlier. Always make a note of your 
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passwords during the install process to make sure you don't forget them. You 
can always change them later on if you want to. 


Ti] Install the GRUB boot loader on a hard disk 
It seems that this new installation is the only operating system on this computer. If so, 
it should be safe to install the GRUB boot loader to the master boot record of your first 
hard drive. 
Warning: If the installer failed to detect another operating system that is present on 
your computer, modifying the master boot record will make that operat ing system 
temporarily unboctable, though GRUB can be manually configured later to boot it. 
Install the GRUB boot loader to the master boot record? 


«Go Back stor 


jo) GRUB boot loader 
Although you may be overwriting an existing operating system on the 
formatted disk drive, we want to install the GRUB boot loader to the master record 
Wait for the installation to finish, at which point remove the CD-ROM and continue 
to restart the server to complete the operating system installation process. 


11 Update and upgrade 
The server will restart, and following the output of the loading processes 
you will be presented with the login prompt. Enter the user details you defined 
earlier to access the server. Let's make sure all packages are up to date. Enter the 
commands shown here to update and upgrade any packages. When complete, 


reboot the server 


@@1 sudo aptitude update && sudo aptitude dist-upgrade 
002 sudo shutdown -r now 


BOR meinen tt pedantry ar tat 
eet o mana 


It works! 


12 Webtest 
Let's make sure we can access the default webpages being served by 
Apache on the server. Find the server's IP address by typing ifconfig in the 
command line after logging back in. Make note of the inet address (typically 
192.168.**) and enter this into a browser of another machine connected to the 
network, You should now see the default Apache page. 


73) Security considerations 


We want to obfuscate as much information about the server from public 


eyes as possible. There are many advantages to this, not least that it makes the 
everything cleaner and more secure. Make a backup copy of the php.ini file and 
then open the original file in the terminal window to make some amendments to 
it. Find the expose_php setting and change it from ‘On’ to ‘Off. Write the changes 
to the file and exit the editor 
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001 sudo cp /etc/php5/apache2/php.ini /etc/php5/ 
apache2/ php. ini.bak 
002 sudo nano /etc/php5/apache2/php. ini 


44) Apache security 
We also want to hide information about the Apache server. Make a 
backup copy of the security configuration file and then open the original to 
edit it. Change the ServerTokens value to Prod and the ServerSignature value 
to Off. Restart Apache to load in the changes to the configuration files. 


@@1 sudo cp /etc/php5/apache2/php.ini /etc/php5/ 
apache2/ php. ini. bak 

002 sudo nano /etc/php5/apache2/php. ini 
003 sudo /etc/init.d/apache2 restart 


e Ubuntu 64-bit a 


45) SSH access 
We want to have remote admin access to our server, so let's check that 
we can reach it via SSH. Open a terminal window in a different laptop or 
machine and enter in ssh your_username@192.168.119.129, Accept the 
fingerprint to continue, at which point you should now be logged in remotely 
to the server. 


9 11:25:08 on ttyseee 


16 Install Webmin 


Download the latest version of Webmin. Once saved in your home 


directory, execute it. It will fail as we are missing required dependencies. To 
install the package with the dependencies, run the final command. This is 
easier than manually installing every required library prior to installation. 


001 wget http://www. webmin.com/download/deb/webmin- 
current.deb 

@@2 sudo dpkg -i webmin-current.deb 

003 sudo apt-get -f install 


47) Webmin browser 
Once installed, we can access the Webmin interface in the browser. By 
default, Webmin is installed on port 10000 using the secure HTTP protocol: 
https://192.168.119.129:10000. From here you can manage your entire server, 
including package updates and installations, and the MySQL server, using a 
fairly intuitive front-end interface. 


jy Webmin 


ig) Install firewall 
At the moment all ports on the server are open. When we make the 
server publicly-accessible we want to lock it down. To resolve this issue we'll 
install Shoreline firewall via the command line. Once installed, copy some 
example configuration files into the Shorewall directory and open a rule file to 
edit it and add new rules. 


001 sudo aptitude install shorewall 

002 sudo cp /usr/share/doc/shorewall/examples/one- 
interface/* /etc/shorewall 

003 sudo nano /etc/shorewall/rules 


19. Addrules 
In the rules file, scroll to the bottom of the page and add a new line for 
every rule. We want to access HTTP and SSH connections (ports 80 and 22) as 
standard. We also want to open up port 10000 so that we can still access the 
Webmin interface. The rules are available in a file in the accompanying tutorial 
download folder 


oe Ubuntu 64-bit 


20 User permissions 
To set the correct permissions to write to the web folders, we need to 
add our user to the correct group and set the permissions on the web folder to 
allow members of that group to write to it. Once complete, connect to the 


server via SFTP using a client like Cyberduck or Filezilla. Set the initial 


connection path to /var/www. 


@@1 sudo usermod g www-data your_username 
002 sudo chown R www-data:www-data /var/www 
003 sudo chmod R 755 /var/www 


oras 


Personal Use 


21 Test PHP & Apache 


With an SFTP connection made to the server, create and upload a 
simple PHP file that echoes the phpinfo() method. Once uploaded, browse to 
the web server on another machine where you should be presented with the 
output from the PHP script. Your server is up and running (albeit only within 
your internal network at the moment). 


— 
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Builda Linux 
server with 
open-source 
software part 2 


Streamline your development process 
by automating the creation of new 


web apps on your Ubuntu server 
tools | tech | trends Ubuntu server 


Virtual host template 

Create a new template file that we can use within our Bash script to 
generate each virtual host for our WordPress sites. Log into your server using 
SSH from the command line or terminal. Once inside, we'll create a new blank 
document which will live inside the default Apache installation directories. 


@@1 > sudo nano /etc/apache2/sites-available/template.http 


02 Host config 


The Virtual Host definition will make use of placeholders for the 
domainname and subdomain values. We'll replace these defaults from within the 
Bash script. In this template, we'll be placing all of our subdomains within a new root 
folder called ‘websites’ We'll also define the log files and directory index values. 
(Code for this step is on this month's disc.) 


03 Create Bash script 

Let's now create the Bash script. Create a new empty file called 
wphosts within the /usr/bin directory. This directory allows us to separate 
user-specific utilities and terminal commands from any system commands 
that live in the root directory structures. This file will contain the script to 
handle the virtual host generation for us. 


gð > sudo nano /usr/bin/wphosts 


Default definitions 

We firstly tell the system that this file is a Bash script, and then clear any 
output currently in the console window. We then set up the default values for 
the Apache directory locations, and assign the sent parameters to variables for 
later use. If you want to use more than one domain name, you can set this as a 
parameter with the value $2 to match the second argument you send through. 


ði #! /bin/bash 


Q02clear 


003 subdomain=$1; 
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+Finished_code 


n the first part of this tutorial we 
repurposed an old or unused PC and 
turned it into a fully functional web 
server, complete with Apache, MySQL 
and PHP and SSH access via terminal 
or command line. The intention was to 
use this server as a development or 
staging environment that we can access 
locally and pass subdomains to clients or users to 
share the progress of their website as you build it. 

In this month's concluding instalment. we'll build a 
Bash script that we can run from the server to 
generate a new subdomain to the Apache web server, 
create the necessary directory structures and 
permissions, and download the latest version of 
WordPress into the desired location on the web server. 

By creating a simple script to handle this for us, 
we can greatly reduce any repetitive tasks, optimise 
our precious time and enhance our development 
workflow in the process. You'll be amazed by how 
tep much time this will save you and how quickly you can 
generate a new subdomain on your web server for 
testing purposes. 


domainname=“myserver . local”; 
ava=“/etc/apache2/sites-available”; 
ena="/etc/apache2/sites-enabled” ; 


08 Checking arguments 

To provide some helpful documentation or to catch the possibility of any 
missing arguments when running the script, the first block of code will determine 
that both the subdomain and domainname values have been populated. If not, a 
message is returned and the script will halt further processing, 


if [C ${subdomain} == “” || ${domainname}== “” J]; then 

echo “Usage: wphosts <subdomain>”; 

echo “Example: wphosts www2”; 

echo “will install Wordpress and create the 
virtual host for www2.${domainname}” ; 

exit 0; 

else 

echo “I am going to make Wordpress installs really 
easy for you!”; 


BONG carats Sor 

echo “. Sous wate 
vhost="$(subdomain}. ${domainname}” ; 
fi 

Create host file 


The next part of the script will ensure the template.http file exists, and 
replace all occurrences of subdomain and domainname within that file with 
the values of the matching properties within the script itself, before writing the 
file to the specified location within the Apache directory for all available sites. 


gð if [C ! -e ${ava}/template.http ]]; then 

002 echo “${ava}/template.http does not exist. Cannot 
create ${ena}/${vhost}.”; else 

gð cat ${ava}/template.http |sed “s/ 
subdomain/${subdomain}/g” | sed “s 


Usage: wpresshosts <subdomain> 

Example: wpresshosts www2 
will install Wordpress 

al 

matt@dev-server:~$ 


wordpress/wp-mail. php 

wordpress/wp-config-sample. php 

wordpress/wp~Links~opml. php 

wordpress/wp-comments—post. php 

I have added Wordpress to your newinstall.myserver. local directory 


Time to set up the 


database for Wordpress 
Enter the name for the database: 
test 
Enter the username 
test 
Enter the password 
test 


for the database: 


for the user: 


You will need to enter your MySQL root user password to complete this process.. 


Enter password: 
The newinstall.myserver. local database has been created for you 


Should I enable /etc/apache2/sites-available/newinstall.myserver. local? (y/n) 


/domainname/${domainname}/g” > ${ava}/${vhost} 


004 fi 
07 Website directory 


Having created the virtual host file, we now need the script to create 
the directory structure for the new website and assign the correct permissions 
to the directory. The vhost variable is the concatenation of both the 
subdomain and domainname values, which form the new site host address. 


001 if [C ! -e /websites/${vhost} ]]; then 
sudo mkdir -p /websites/${vhost}; 
sudo chown -R www-data / websites/${vhost}; 
sudo chmod -R 755 /websites/${vhost}; 


@06 echo -e “/websites/${vhost} has been created for 
you. \r\n”; 


007 fi 
(6a Latest WordPress version 


“We'll then make sure we have the latest version of WordPress 
downloaded and installed into the freshly created directory structure for our 
site. Here we download the latest version, unzip the archive and move it into 
the required folder, rename the unpacked folder to ‘htdocs’ and then delete 
the downloaded archive file 


09 Database options 

Next we can set up the database for each new WordPress install. In 
this instance, we want to be able to provide specific details when asked by the 
script, as opposed to sending through from the very beginning as 
parameters. Here, the script will assign the received input to the variable 
names for later use. 


ði echo -e “Time to set up the database for 
Wordpress\r\n”; 
802 echo -e “Enter the name for the database: \r\n” 


and create the 


+ Running the script and not passing in any parameters will result in 
the help reminder / command usage prompt 


| +The script will download and install the latest version of WordPress 
into the required web directory for the subdomain 


+ To set up the WordPress database, the script will ask for user input 
to specify the database connectivity details 


read dbname 
echo “Enter the username for the database:”; 
read dbuser 
echo “Enter the password for the user:”; | 
read dbpassword f 


Generate SQL 

Using the values that we have received from the user's input, we can 
now create the SQL strings necessary to perform the database creation | 
commands. We'll create the database, assign the user full privileges on that 
database and then combine the three SQL commands into one string. The 
‘which mysql’ command will then provide us with the correct path to the 
service on the server. 


EXPECTED_ARGS=3 

E_BADARGS=65 | 

MYSQL=‘which mysql` 

Q1=“CREATE DATABASE IF NOT EXISTS $dbname;” 

Q2=“GRANT ALL PRIVILEGES ON $dbname.* TO 
‘$dbuser’@’localhost’ IDENTIFIED BY ‘$dbpassword’ ;” 

Q3=“FLUSH PRIVILEGES” ; 

SQL=“${Q1}${Q2}${Q3}” 


Web Design Tips, Tricks, & Fixes 89 


feet nt ogee gt te 
O ss” =o 


Welcome to WordPress. Belore getting started, we need some information on the database. You wil need to 
‘know the following items belore proceeding. 


1. Database name 
2. Database username 

3. Database password 

4. Database host 

5. Table prefix (i you want to run more than one WordPress in a single database) 


H for any reason this automatic file creation doesn't work, don't worry. All this does is fill in the 


database information to a configuration file, You may also simply open wp-contig-sampie.php ina 
‘text editor, fill in your information, and save it as wp-coafig.php. 


setter mean ve 


Hello world! (om, 
oy 
cir 9 Morea my et on Fea tan baap 


‘ryote sind ah 83 


Default 
installation 


The script assumes you are 
using the default directory 
paths within the Apache 
installation. You can change 


these if needed at the 
beginning of 
the Je 


Execute transaction 

To perform the actions against the database server, we'll force the 
script to ask for the root MySQL user's password. We'll send through the 
generated SQL script string and output a user-friendly message once the 
database has been created. 


001 echo -e “\r\nYou will need to enter your MySQL root 
user password to complete this process...\r\n”; 

$MYSQL -u root -p -e “$SQL” 
E echo -e “The ${vhost} database has been created 
for you\r\n”; 


echo “.... 
echo -e “ 
2 Enabling hosts 


All created host files are stored in Apache's ‘sites-available’ directory. 
The Bash script can ask the user if the host should be enabled immediately. If 
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‘There doesn't soem to be a wp-config. php fio. I need this belore wa can get started. 


Need more help? We got t. 


‘You can create a wp-config.php fle through a wab interface, but this doesn't work for all sorver setups. The 
‘safest way is to manually create the fio. 


yes, it will first ensure it hasn't already been enabled and that the file exists 
before running the necessary command to copy the host to the ‘sites-enabled’ 
directory. (This step's code can be found on the disc.) 


Reminder text 

If the user chooses not to enable the site through the script, we'll 
generate a user-friendly message to provide them with the correct command- 
line script to run to enable it as and when required. This forms the second part 
of the if statement started in the previous code sample. 


else 

echo “ “; 

echo “You will need to enable the 
manually (when you’re ready)..”; 

echo “sudo a2ensite ${vhost}”; 

echo “ “; 

fi 


4 Apache restart 

With any configuration changes to the Apache config files, or the 
available or enabled hosts, Apache will need to be restarted to pick up the 
altered values and properties. Here the Bash script once more asks the user 
for a yes/no answer and if a positive is received, it will restart the Apache 
service automatically. 


virtual host 


bool=“n”; 


echo -n “Should I restart Apache? (y/n)”; 


003 echo “ “; 
004 read bool; 


005 if [C ${bool} = 
== “yes” || ${bool} 
then 

@@6 echo “Running: service apache2 
@07 sudo service apache2 restart; 


“y” || ${bool} == “Y” || ${bool} 
“YES” || ${bool} == “Yes” J]; 


restart”; 


5 Apache reminder 
Once more, the user has the option to choose not to restart the 
Apache service within this script, so we'll generate another friendly message 
to provide them with a reminder of the correct command-line script to run 
whenever they choose to restart and reload the configuration. 


01 else 

@@2 echo “Remember you will need to restart Apache for 
the new virtual host to take effect.”; 

003 echo “sudo service apache2 restart”; 


004 fi 


16 Closing remarks 

= Whether the script will only be accessible by one person or a number 
of people within a time, it's always nice to leave with a positive message and a 
confirmation of the work achieved through the process. The following code 
closes off the scripting within the Bash file and informs the user that the work 
is complete. 


@@1 echo “OK, you’re all set with the latest 
Wordpress installed on the new virtual host!”; 
002 echo “Bye!”; 
003 echo “....... 
004 echo “.... 


f 


File permissions 

=" With the Bash script complete and stored in the /usr/bin directory, we 
need to assign the correct permissions to ensure we can run the file as an 
executable. We also need to set the correct permissions on the Apache site 
directories so that the script can perform file operations within them to 
generate the new host files. 


@@1 > sudo chmod 755 /usr/bin/wphosts 
002 > sudo chmod -R 777 /etc/apache2/sites enabled/ 
003 > sudo chmod -R 777 /etc/apache2/sites-available/ 


18 Run script 

== with the script complete, we can now run it to generate a new 
WordPress site on our local server. As the script was placed in the /usr/bin 
directory, we should be able to execute it by typing the script name into the 
terminal window. Create a new site by passing in the subdomain value. 


@01 > wphosts newinstall 
19. Confirm hosts 

* We can double-check that the script ran as expected by confirming 
the existence of the virtual host entry for Apache. We can log into the 
Webmin interface on the server and select Servers>Apache Webserver from 
the left menu. The new host entry should be visible in the list. 


@01 # Webmin address (your IP may differ) 
002 http: //192.168.119. 128: 10000 
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Bash -- Everyday Ubuntu life 
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Understanding 
Bashscripting- 
thehelpful 
command-linecode 


This entire tutorial was rather 
intensive in terms of writing the 
Bash script and the code that 
formed the many steps in the 
process. The majority of these 
steps would typically have to 
berun manually toachieve the 
desired result, whereas creating a 


xecutable script file wraps 


the entire process into one general code block, saving time in the long run. 
Bash scripting is incredibly powerful and relatively simpleto learn, and 

while a good portion of Ubuntu (or indeed any Linux/UNIX-based) server 

management can be achieved through graphical interfaces such as Webmin, 

nothing can truly replace the power of the command line and the speed 

of using Bash through the CLI eat resource to get started with Bash 

scripting is available on the Ubuntu community wiki pa 


https://help.ubuntu.com/community/Beginners/BashScripting 


Suit your 
requirements 


You can, of course, create as 
many scripts as you need 
that can download and install 
specific code applications 
to fulfil your 
requirements. 


f Database created 

Let's also confirm that the script created the database, as we would 
expect. You can also check this from within the Webmin interface via the 
Servers>MySQL Database Server menu, or query MySQL directly from the 
command line and obtain a list of all databases available on the server. 


001 > mysql -u root -p 
mysql> show databases; 
mysql> exit; 


(2p) Web code 

z Finally, let's confirm that the WordPress code was successfully 
unpacked into the right location on the web server. We can browse to the 
/websites directory on the server and view the individual site directories, inside 
of which should be an htdocs folder containing the WordPress installation. 


@01 > cd /websites/ && ls -1 
002 > cd /websites/newinstall.myserver. local/htdocs/ 
&& ls -1 


22 Configure WordPress 

= With the virtual host created, added to Apache and enabled, following 
a restart of the Apache services you will be able to view your freshly created 
subdomain and complete the installation process by entering the database 
details provided during the scripting process into the WordPress setup pages. 


Web Design Tips, Tricks, & Fixes 91 


mms (2, | 


Tricks 


9 Modern workflow with Yeoman 


Discover the fastest way to make webapps 


1 25 Sublime Text 2 tips and tricks 


Code like a pro in the web's hottest editor 


1 Make waves on the web 
Make simple generative music with the web audio API 


11 Dark patterns 


Investigate questionable tactics from the net’s dark side 


11 4 Use tiled mosaic site layouts 


Develop masonry-style montages 


11 Create touch-responsive web content 
Find out how to add support for touch gestures 


12 Use hover and transition effects 
Style your site using CSS3 techniques alone 


12 Make a slider with hover effects 


Build the ultimate eCommerce product slider 


12 4 Add fade effects to pop-up tooltips 


Create a fully interactive UX based on droplets 


12 Implement a floating toolbar 


Get your footer walking up to the header position 


Integrate rich & 
dynamic elements 
into your pages 


1 28 Design a hexagonal menu with CSS3 


Improve on standard navigation setups 


1 3 Build an interactive image caption with CSS3 


Add visual panache without having to write JavaScript 


1 3 4 Develop dynamic photo blogs 


Automatically showcase your latest photo uploads 


1 36 Make a minimal photography site 


Understand the principles of truly great minimal design 


1 38 Create images from code using GD and PHP 


Generate icons without using only code and font files 


142 Animate designs for HTML5 Canvas in Flash 


Use CS6 to publish animations that work with Canvas 


1 4 Draw a spinning cube with 3D Transforms 


Design and animate a die that users can interact with 


1 Model with SketchUp to build 3D turntables 


Sell your product with a contemporary mockup 


1 56 Capture webcam video without a plug-in 
Cut out Flash and third parties; get video with HTML5 


16 Play full-screen video in the background 


Keep users hooked with subtle but lively clips 


Platform 


WE ARE SUBSTRAKT 


A creative digital &) design studio 
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MODERN 
WORKFLOW 


— 


WITH 


YEOMAN 


“Say hello to Yeoman, the 


faster pies to 


ol O 


ne thing is certain: times sure have 

changed. Not too long ago, front-end 

development, though not simple, was 

manageable. Learn HTML, a bit of 

CSS, and you're on your way. These 

days, however, for lack of better 
words, there are far more variables to juggle. 
Preprocessors, performance tuning, testing, image 
optimisation and minification represent just a few of 
the key factors that the modern day front-end 


developer must keep in mind when working. 

For instance, though it’s easy to use, CSS certainly 
does not scale well. And, while powerful, JavaScript 
can at times be an ugly and difficult language to work 


make webapps” 


SA tne B fe On as 


with. Then there’s the performance aspect; no longer 
are we merely designing for Internet Explorer and 
Firefox. These days, we have myriad browsers, 
devices, resolutions, and connection speeds to 
consider when developing new applications. 

To say that ours is an incredibly tough industry 
would be the understatement of the century. 

The upside is that for every road block, solutions 
have certainly been provided by members of the 
community. Consider the CSS scaling issue; well, 
preprocessors, like Sass, LESS, and Stylus were 
introduced to drastically make our lives easier. What 
about the nasty CSS3 browser-prefixing issue? 
Compass takes care of that! And the JavaScript 


dilemma? Once again, CoffeeScript, and now 
TypeScript, to the rescue! The only problem is that 
each new solution requires its own system and 
process. As one might expect, over time, this can 
significantly complicate your workflow. Now, we have 
multiple Terminal tabs open, each monitoring a 
subset of the files within our projects, listening for 
changes. And that’s just the tip of the iceberg. We 
haven't yet touched on workflow, coding best 
practices, image optimisation, testing, and 
developing an automated build process. Even writing 
about all of these steps is shortening my breath! 

Wouldn't it be fantastic if somebody wrapped up 
all of these into one easy-to-use package? 


SAY HELLO TO YEOMAN 


Created by some of the friendly folks at Google 
(including Paul Irish and Addy Osmani), Yeoman is 
the solution to your problems. As the core team puts 
it, Yeoman offers an opinionated workflow to get you 
up and running with new projects as quickly as 
possible, But what does this really mean? Well, it 
offers the ability to scaffold new projects, as well as 
the necessary frameworks and testing tools. What 
this essentially translates to is less tedious 
configuration, and more creation. 

To get started with Yeoman, we first need to install 
it from the command line. Go ahead and run the 
following command: 


@@1 curl -L get.yeoman.io | bash 


This script will perform a variety of things, including 
installing the necessary libraries for Yeoman to do its 
job. You'll likely find that it requires a handful of steps 
on your part, but, don’t worry; it'll tell you exactly 
what needs to be done! 

Once the installation completes, run yeoman to 
see what's available. 


Above: Run the yeoman command to see what's available 


You'll find a variety of options, such as init for 
initialising a new project, build for creating a special, 
optimised dist folder for deployment, and install, 
which makes the process of dealing with package 
management as easy as possible. 

To learn more about what each of the options 
actually does, append --help to the command: 
yeoman init --help. 

Let’s create a new project with Yeoman. Create a 
new directory on your desktop, cd to it from the 
Terminal, and then run: 


@@1 yeoman init 


At this point, the program will prompt you to answer 
some questions. 
+ Would you like to include Twitter 
Bootstrap for Compass? 
+ Would you like to include the Twitter 
Bootstrap plug-ins? 
+ Would you like to include RequireJS 
(for AMD support)? 
+ Would you like to support writing 
ECMAScript 6 modules? 


YEOMAN 


Home 


Why Yeoman? @ 
Getting Started 

Documentation 

* Command Line 

* Package Manager 

+ Installation 


+ Insight 


FAQs 


Discuss 


Google Plus 


Above: Yeoman is an opinionated toolkit for rapidly developing webapps 


Above: Upon initialising a new application with Yeoman, you'll first 
be prompted with a handful of questions 
These questions give you the ability to configure 
your new project right out of the box. For now, 
choose No to each question. 

If you'd prefer to bypass these questions in the 
future, instead run yeoman init quickstart. This will 
prepare a new application, with Modernizr, jQuery, 
and HTMLS5 Boilerplate baked in. 

With that single command alone, Yeoman instantly 
scaffolds a new project for you. Don't let yourself be 
overwhelmed by all of these files, though; if they 
weren't generated for you, you'd eventually create 
them manually. 

What do you get with a single yeoman init 
command? Just think of Yeoman as the helpful robot, 


Fixes 4 i | 


YEOMAN 


MODERN WORKFLOWS FOR MODERN WEBAPPS 


Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly 
build beautiful, compelling web apps. 


who does all of the manual labour for you. ‘Yo, man; 
go fetch me jQuery and Modernizr!’ 

Now that we have ourselves a new project, let's 
launch a preview server and begin monitoring the 
application for changes. 


O01 yeoman server 


Instantly, Google Chrome will be launched, displaying 
your project (also, no more security errors). Well, 
that's handy, but as you'll quickly find, there’s much, 
much more to see. Place your browser and editor 
side-by-side, and try the following things: 


LIVERELOADING 


Change the h1 tag's text and watch it instantly update 
in the browser, without a refresh - Yeoman at your 
service! It achieves this via the LiveReload Google 
Chrome extension, but, if that’s not installed, a 
fallback reload process will be used. 


eoo G project 
Date Modified Kind 
Today 5:48 PM -- Folder 
© 404.htmi Today 5:48 PM 4KB HTML document 
@ favicon.ico Today 5:48 PM 4KB Windows icon image 
> QI images Today 5:48 PM -- Folder 
© index.htm! Today 5:48 PM 2KB HTML document 
™ robots.txt Today 5:48 PM 32 bytes Plain Text Document 
> Gi scripts Today 5:48 PM -- Folder 
> Gi styles Today 5:48 PM -- Folder 
> (Bi templates Today 5:48 PM -- Folder 
™ Gruntfilejs Today 5:48 PM 4KB JavaScript Source File 
È package.json Today 5:48 PM 102 bytes Plain Text File 
v Gees Today 5:48 PM -- Folder 
© index.htm! Today 5:48 PM 937 bytes HTML document 
> Bld Today 5:48 PM -- Folder 
> Gi runner Today 5:48 PM -- Folder 
> Gi spec Today 5:48 PM -- Folder 
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SASS 


Change main.css to main.sass (or main.scss, if that’s 
your preference), and enjoy instant compiling and 
updating in the browser. To test it out, try creating 
and using a variable. 


001 // main. sass 
002 $textColor: #666 
@03 body color: $textColor 


Nice! Zero set up required. You are now able to 
separate your stylesheets, as needed, and import 
them into main.sass. 


gð // main. sass 
OOZ Gimport ‘grid’ 
003 @import ‘buttons’ 
004 @import ‘module’ 


Each time a file is saved, Yeoman will automatically 
re-compile your Sass into regular CSS and refresh the 
browser for you. 


COMPASS 


If you're a Sass fan, then it’s likely that you also prefer 
the excellent Compass framework. No worries; 
Yeoman is happy to oblige. Compass support is 
already available; simply import the applicable 
modules, and continue as usual. 


001 // main. sass 

OOZ import ‘compass/css' 
004 + 

005 +box-sizing(border-box) 
006 

007 box 

08 width: 200px 

09 +transition(width 1s) 
010 

@11 &:hover 

@12 width: 400px 


If you're not yet a preprocessor convert, you have to 
admit: this is significantly better than the alternative: 


O01 + { 

@@2 -WebKit-box-sizing: border-box; 
Q@3 -moz-box-sizing: border-box; 
04 box-sizing: border-box; 

005 } 

006 

BOT .box { 

BOB width: 200px; 

@@9 -wWebKit-transition: width 1s; 
@10 -moz-transition: width 1s; 
@11 -ms-transition: width 1s; 
@12 -o-transition: width 1s; 

@13 transition: width 1s; 

014 } 
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compass 


n-source 


015 

@16 .box:hover { 
@17 width: 400px; 
018 3 


COFFEESCRIPT 


JavaScript is just fine and dandy, but some feel that 
CoffeeScript provides a considerably cleaner syntax 
that fills in many of the gaps in the language. 

Within the scripts/ directory, optionally create a 
new folder, coffee/, and add your first CoffeeScript 
file: person.coffee. 


@@1 # scripts/coffee/person. coffee 
OOZ class Person 


FS | otro 


BS CaffeeScript waren mormon smn | 


CoffeoScript is a litte language that compiles into JavaScript. Underneath all those awkward | 
braces and semicolons, JavaScript has always hed a gorgeous object modol at its hoart. | 
CoffeeScript is an attempt to expose the good parts of JavaScipt in a simple way. 


‘The golden rule of CoffeeScript is: "It's just JavaScript’. The code compiles one-to-one into the 
‘equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript 
library seamlessly from CoffeeScript (and vice-versa). The compiled output is readable and pretty- 
printed, passes through JavaScript Lint without warnings, will work in every JavaScript runtime, 
and tends to run as fast or faster than the equivalent handwritten JavaScript. 


Latest Version: 1.4.0 


Overview 


CoffeeScript on the left, compiled JavaScript output on the right. 


# As t 
mmber = 42 
opposite = true 


# Condition 
number = -42 if opposite 


sayare = (x) -> X * x 


var cubes, list, math, num, number, opposite, race, square, 


number = 42; 
opposite = true; 


if Copposite) { 


Compz 


Save the file, and like magic, Yeoman immediately 
compiles it into vanilla JavaScript, and places the new 
file directly within the parent scripts/ directory. Why 
don't you see for yourself? 


@01 // scripts/person. js 
@02 var Person; 


003 

@04 Person = (function() { 
005 

06 function Person() {} 
007 


OOB return Person; vO; 


Perfect, and more importantly, effortless! 


slice = ().slice; 


number = -42: 


Above: CoffeeScript is a beautiful little language that compiles into JavaScript 


GRUNT 


Grunt is a task-based command line build tool for 
JavaScript projects 


View on GitHub Documentation 


Getting started 


Be sure to read the getting started gulde, which is a complete guide to 
configuring grunt for your project. In addition, check out the example 
runtiles which highlight a numberof fairy common configurations. 


instalusing npm install -g grunt 


Latest plugins 
Use build blocks to simply update the references in your htm and pertorm le 
‘concatenation and minification. 
‘Grunt plugin for checking that all node modules are installed and up-to-date. 
Compile markdown to htm GFM and code highlighting support! 
Grunt plugin for converting markdown and code into htm! 
‘Acomponent son generator 


Search in 201 plugins...) 


Above: Behind the scenes, Ben Alman’s Grunt tool is what configures the compilation 


If you need to modify the directory structure in 
any way, refer to the grunttile.js file within the root of 
your application. Behind the scenes, Ben Alman's 
Grunt tool is what configures the compilation. 

At this point alone, Yeoman has given us a great 
deal of flexibility. With that single yeoman init 
command, you may now style your websites with 
Sass, code in CoffeeScript, and as you make changes, 
instantly see the updates reflected in the browser. 
But we're not done yet, Not even close! 


PACKAGE MANAGEMENT 


Yeoman leverages a powerful package manager for 
the web, called Bower. What’s a package manager? 
Well, if you're still manually downloading, for 
instance, the Underscore library from underscorejs. 
org, then you're doing it wrong. What happens when 
the library is updated a few months later? Will you 
manually redownload the library again? Time is 
money; so let Yeoman do the work for you. 

Let’s pull Underscore into our project. 


BOT yeoman install underscore 


Yeoman will respond to this command by 
downloading the latest version of the library and 
placing it within a new vendor directory. Now it's 
ready to be used! 


B01 <script src="scripts/vendor/underscore/ 


But, what if we're not exactly sure what the name of 
the asset we require is? In these situations, we can 
refer to Yeoman search. Without passing any 
arguments, Yeoman will return a list of every asset 
that is available to install. Let's search for the popular 
normalize.css project, by Nicolas Gallagher. 


Remember: Bower isn’t exclusively for JavaScript- 
specific assets. 


At the time of writing, two projects should be 
returned to us: 


It looks like normalize-css is the one we want. 


© Chai Assertion Library 


Now, import it in the same way that you normally 
would: 


Alternatively, rename the file to normalize.scss, and 
import it into your main.sass file. 


There's a variety of other Bower-specific commands 
that you'll want to remember: 

Yeoman uninstall jQuery - Uninstall a package. 

Yeoman update jQuery - Update library to the latest 
version. 

Yeoman list - List all currently installed packages. 


TESTING 


If testing is not yet part of your workflow, it should 
be! What could be better than a robot that 
automatically verifies your work after each save? 

Luckily, Yeoman makes it incredibly easy to test 
your applications. Out of the box, the popular Mocha 
framework and PhantomJS (headless WebKit) are 
available. However, it’s easily configurable, if you 
prefer a different tool, like Jasmine. Additionally, it 
offers the Chai assertion library, which you'll quickly 
grow to love. 

Open the tests/index.html file. Toward the bottom, 
you'll see a couple of sample tests provided. Go 
ahead and delete those and create a new test file: 
spec/person.js. Here’s a test to get you started. 


Guide API Plugins 


Chai is a BDD / TDD assertion library for node and 
the browser that can be delightfully paired with 
any javascript testing framework. 


Download Chai «2° 


for Node Artherslattorm? Browser Rais 


Issues | Fork on GitHub | Changelog | Google Group | Build Status 


The chai package is available on npm. 


$ npm install chai 


NS) Getting Started 
Learn how install and use Chai through a series of 
guided walkthroughs, 
API Documentation 


Explore the BDD & TDD language specifications for 
all available assertions, 


Plugin Directory 
Extend Chai's with additional assertions and vendor 
integration 


S 


Chai has several interfaces that allow the developer to choose the most comfortable. The chain-capable BDD 


Above: Chai is an assertion library for Node and the browser that can be paired with any JavaScript testing framework 
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function() { 
004 var person = new Person name: 
"Jeffrey', age: 27 

expect (person. age) . to.be.above(®) ; 


yn: 
v3 


SHOULD INTERFACE 


If you'd prefer to use Chai’s (an assertion library) 
should interface, return to index.html, and change 
expect = chai.expect to should = chai.should(. Now, 
you can update your spec, so that it reads: 


001 person. age. should. be. above(®) ; 


Which method you choose is entirely up to you. There 
is no correct choice; only preferences. 
To run this test, return to the Terminal, and type: 


@@1 yeoman test 


As expected, the test should fail with the message: 
“Can't find variable: Person.” It’s a failing test, but, 
more importantly, it works - we're testing! Because 
Yeoman leverages the excellent PhantomJS tool 
(headless WebKit), these tests can even be run 
without the browser. 


COFFEESCRIPT TESTS 


If you prefer to write your tests in CoffeeScript, you'll 
need to make a couple tweaks to your gruntfile,js. 
Begin by adding a new compile object to the compass 
task. Within this object, specify the files that should 
be watched. In this case, we're instructing Grunt to 
compile all CoffeeScript files within test/spec/coffee. 


// Coffee to JS compilation 
coffee: { 


dist: { 

src: ‘app/scripts/**/*.coffee’, 

dest: 'app/scripts' 

i 

compile: { 

files: { 
"test/spec/": "test/spec/coffee/*. 

coffee" 


The final step is to tell Grunt to keep an eye on that 
directory. When a file is saved, it should be 
recompiled, accordingly. 

Find the watch task, and then update the coffee 
object, like so: 


aði coffee: { 


002 files: ['<config:coffee.dist.src>’, 
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jaleikas Sublime Text 2 all the way, Yeoman io, LiveReload & Weinre for app side of things. 


-Trying out yeoman (http:/t.co/CeqCpmu), Despite a clunky install, it seems to be uh-mazing. 


iiss 62 i etek a i aia 


. , csi iii cage 


‘Yeoman - Modem workflows for modern webapps http://t.co/A69Kb50k 


. RT @smi8data: Yeoman - Modern workflows for modern webapps http://t.co/kssChin4 #opensource 


‘Yeoman - Modem workflows for modem webapps http://.co/kssChin4 #opensource 


. Been using yeoman io for about a week now and it's getting better and better, super quick to start prototyping 


. Yeoman - Modem workflows for modem webapps http:/t.co/RIqudajm i would give it a try over the play framework 


. Mal schnell Homebrew für yeoman io installieren, brew doctor’ brachte endlose Feblerlist: gettext, MacPorts, Verzeichnisrechte,... #fail 


. Yeoman - Modern Workflows For Modern Web Apps http://t.co/stvj4lih 


Above: With Yeoman, we've managed to bulld a simple tool for displaying specific tweets in minutes 


'test/spec/coffee/*.coffee'], 
E tasks: 'coffee reload’ 
3 


Above, we're simply adding a new path to the files 
array. This way, Grunt knows that it needs to watch 
the test/spec/coffee directory as well for changes, 
and run the coffee and reload tasks accordingly. 


PUTTING IT ALL TOGETHER 


To illustrate a few more of Yeoman's abilities, let's 
take this new learning, and apply it to a simple project 
from scratch. Our goal is to display the latest tweets 
about Yeoman on the page, and include the tweeters 
avatar, and a link to the original tweet. 

We begin by rapidly creating a new application 
with Yeoman. 


@01 mkdir tweets && cd tweets 
quickstart 


yeoman init 


Next, we boot up the server and begin watching 
the Sass and CoffeeScript files for changes. If you're 
working along, be sure to place your browser and 
editor side-by-side for the best workflow. 


@@1 yeoman server 


Feel free to remove the boilerplate HTML that 
Yeoman provides as an example. Next, we'll start 
writing the necessary code to fetch the tweets. Within 
the scripts/ directory, create a new coffee/tweets. 
coffee file, and reference the compiled version of this 
file within index.html. 


001 <link rel="stylesheet" href="scripts/ 
tweets. js"> 


Next, we'll fetch the desired tweets using Twitter's 
easy-to-use Search API. To fetch a JSON file 
containing these tweets, we can use the following 
URL: search.twitter.com/search.json?q=yeoman.lo. 
However, because we'll be fetching this data, using $. 
getJSON, we'll need to specify a callback parameter, 
so that we trigger Twitter's JSONP format. 

Refer to Twitter's API for more search options. dev. 
twitter.com/docs/api/1/get/search. 

Let's create the class. 


001 # scripts/coffee/tweets. coffee 
002 App = App or {} 


class App. TweetsCollection 

005 constructor: (query = 'yeoman.io', 
006 apiUrl = 'http://search. twitter .com/ 
search. json’) -> 


007 
008 @query = query 
009 @apiUrl = apiUrl 
010 
011 fetch: -> 
3 $.getJSON "#{@apiUrl}?q=#{(@ 


query}&callback=?” 


Note that we're using dependency injection (from 
the constructor) to make the actual process of testing 
this code (beyond the scope of this tutorial) 
considerably easier. 


If you'd like to try it out, within your browser's 
console, just run: 


@01 var tweets = new App. TweetsCollection 
tweets. fetch().done(function(data) { 
console. log(data. results); 
y; 


The console should now display a list of tweets, which 
reference yeoman.io. 

Now that we've managed to fetch the tweets, we 
next need to prepare the HTML to display them. 
While it's recommended that you use a proper 
templating engine, such as Handlebars or even 
Underscore’s implementation, for the purposes of 
this tutorial we'll keep it simple. Luckily, CoffeeScript’s 
block strings and interpolation features make the 
process of embedding HTML as elegant as possible. 


@el. append "”" 


instead. 
<li> 


<img 
src='#{ tweet .profile_image_ 


url}'alt='#{tweet. from_user}'> 


#{tweet. text} 
</li> 
@ 


Note: when you're ready to use a dedicated 
templating engine, don't forget to install it with 
Yeoman and, behind the scenes, Bower: yeoman 
install handlebars. 

This code is fairly simple. When instantiated, it'll 
expect an array of the tweets (which we already know 
how to fetch). When its renderQ method is triggered, 
it will cycle through that array of tweets, and, for each 
one, append a list item with the necessary data to an 
unordered list (@el). That's it! 

If you're curious about the => sign (instead of ->), 
that’s what we refer to as a fat arrow in CoffeeScript. 
It ensures that, within the anonymous function, this 
will still refer to the TweetsView object, instead of just 
the single tweet. 

Now that our code is in place, let’s get the ball 
rolling! Back to the index.html file, and add a new 
app.js reference. 


class App. TweetsView 
el: $('<ul>') 


constructor: (tweets) -> 
@tweets = tweets 


render: -> 
$.each @tweets, (index, tweet) => 
# Try to use a templating engine 


001 <script src="scripts/vendor/jquery.min. 
js"></script> 


<script src="scripts/tweets.js"></script> 
<script src="scripts/app.js”></script> 


Within scripts/coffee/app.coffee, add: 


tweets = new App. TweetsCollection 


tweets. fetch().done (data) -> 
tweetsView = new App. TweetsView(data. 
results) .render() 
005 $(document.body).html tweetsView.el 


Upon saving this code, thanks to Yeoman, we can 
watch the browser instantly refresh to display the 
latest tweets about Yeoman! 

You might be wondering where that done method 
is coming from. This is necessary because, behind the 
scenes, when the fetch method is called on App. 
TweetsCollection, an AJAX request is being made. As 
such, a promise is being returned. 

Think of a promise as jQuery promising to notify 
you when an asynchronous operation has completed. 
When this async request is done, then execute this 
callback function. 

Admittedly, this was a fairly simple project, but 
Yeoman has significantly improved our workflow. 

The final step is to build the project, in order to 
optimise our assets and images (if applicable) as 
much as possible. 


yeoman build 


This command will instruct Yeoman to run all 
necessary tasks, and ultimately produce a new dist 
directory that should be pushed to your server for 
production. All files will be compressed and 
optimised. Once the operation completes, we can 
preview it by running: 


yeoman server:dist 


View the source and notice how the assets have 
been compressed. But we can do better. At this point, 
the scripts and stylesheets (not applicable in our 
project) haven't been concatenated. Let's fix that with 
Yeoman! Return to your index.html file, and wrap the 
script references with an HTML comment, which 
instructs Yeoman to concatenate and minify the 
contained files. 


<script src="scripts/vendor/jquery.min. 
js"></script> 

<script src="scripts/tweets.js"></script> 

<script src="scripts/app. js"></script> 

<!-- endbuild --> 


a <!-- build:js scripts/scripts.js --> 


Woindereurve toromona ai 
Bower he tors ora package manage jt reaa 0 5 0 wh te 
scot morm 


> seo morovarant: 0 nom upama 


ewes 
Fotowg 
onome 


tower 


Above: Stay up to date with Yeoman at http://twitter.com/yeoman 


This translates to: when building the project, 
concatenate all of the files within the build:js 
comment block, and replace the scripts with a single 
reference to scripts/scripts.js, which Yeoman will 
automatically generate for you. 

This way, in production, we're working with only 
one HTTP request instead of three! This also can be 
used for your stylesheets, though, if you're using 
Sass, it's unnecessary. 

With that change in mind, let's build and preview 
the project again. 


yeoman build yeoman server:dist 


It still works! View the source, and notice that we now 
only have one script reference. 


a <script src="scripts/110552aa.scripts. 
js"></script> 


Folks, this is free optimisation. No hidden fees. Use it! 
Your final step would be to push the dist folder up to 
your server, and head home for the day! 


CLOSING THOUGHTS 


You'll also be excited to know that there’s still so 
much more to Yeoman than what has been covered 
in this article, such as sub-generators. In addition to 
scaffolding out entire frameworks, we can also 
rapidly generate the smaller parts, such as for 
models, views, and so on. 

Perhaps the greatest thing about Yeoman is that 
it's open. While some similar tools cost money, 
Yeoman is open source, which means that you - yes 
you - can fork it, and help improve it! 

As the web moves more and more toward 
client-side-centric applications, Yeoman couldn't have 
come at a better time. So, forget the preparation and 
configuration; let's start building things. 

To stay up to date with the latest Yeoman news, or 
to make suggestions and log feature requests, feel 
free to follow @yeoman on Twitter, and subscribe to 
its Google group (groups.google.com/ 
forum/#!forum/yeoman-dev). 
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<must—know> 
<Sublime Text 2> 
<tips and> 
<tricks> 


n less than a year, the Sublime Text 2 code 
editor - available for Mac, Windows, and Linux 
~- has skyrocketed to becoming the editor of 
choice for a huge number of developers and 
designers. TextMate users, IDE faithfuls, and even 
Vim fanatics have switched over - which speaks 
volumes about it 


How come? Well, it's a sophisticated editor 


with lightning-fast speed, an incredibly vibrant plug-in 


community, easy configuration, Vintage (Vim) mode, 


multiple cursors - the list goes on. As you'll soon 


discover, it only takes a few minutes to realise what 


makes Sublime Text so special. It’s not about bells, it's 


not about whi! about sheer speed and workflow 


In these areas, Sublime soars. 


If you've yet to make the switch out of some sense of 


loyalty to your current editor of choice, give this article 
twenty minutes of your time, and it just may convince 
you to reconsider 

Please note that this article, for convenience and 
readability, will exclusively use the Mac-specific 
keyboard bindings. Refer to the documentation - docs. 
sublimetext.info/en/latest/reference/keyboard_ 
shortcuts_win.html - for the equivalent Windows and 


Linux bindings. 
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Multiple cursors 
Let’s begin with the feature that is guaranteed to 
blow your mind: multiple cursors, 

A note of caution: once you € the flexibility 


xperience 
f 


of having multiple cursors at your finger tips, you won't 


be able to go back to the old way. 
Imagine that you need to change every occurrence 


of the word myMethod to newMethod. Trac 


you might perform a search and replace; however, in 


Sublime, it's much easier. Simply place your curso 


within the word, and press Ctrl+Cmd+G. You've now 
elected every occurrence of ‘myMethod’, and have 
created multiple cursors. Change the text, and watch all 
of them update! Jaw dropping, right? 

Alternatively, you can always press Cmd+D 
repeatedly to incrementally select each additional 


occurrence of the word. 


Command palette 

Sublime’s command palette is a godsend for those 

who prefer to touch the mouse as little as possible. 
The command palette allows you to run countless 

commands, such as changing the syntax type for the 


current document, installing plug-ins, and searching for 


snippets, to name a few 


To, for instance, 


highlighting for the current document from say 


to PHP - press 


Cmd+Shift+P and type ‘css. 


change the current syntax 


HTML 
The option 


Set Syntax: CSS should now display. Hit Enter, and you're 


earching here. As 
in the entire word 


Memorise 


| About 
| Bookmarks: Clear All 
rks: Select All 


rks: Select Next 


rks: Select Previous 


jookmarks: Toggle 
| Build: Build 

| Build: Cancel 

Folding: Fold Tag Attributes 
infold All 


Coffee: Run Cake Task 


Code Folding 


Coffee: Run Script 


Convert Case: Lower Case 


onvert Case: Swap Case 


take advantage of 


you do not have to type 


yboard command and use it often. 


Package control 

Package Control is a powerful package manager that 
allows you to, from within the particular code editor 
of your choice, install pretty much any package that 
you can imagine. 

Need Zen Coding or CoffeeScript syntax 
highlighting? It only takes a couple keystrokes to set up. 
No more scouring the web for the right plug-in! 

To install Package Control, visit Will Bond's website 
(wbond.net/sublime_packages/package_control), 
copy the snippet of code provided, return to Sublime 
Text, press Ctrl’, paste the snippet in, and restart 

To install Zen Coding, open the command palette 
(Cmd+Shift+P) and type, ‘install’ Sublime will provide a 


list of all the various plug-ins that are available to be 


installed. Search for Zen Coding and hit Enter to install 
it. Yep 


ul>li*4 + Tab 


it’s that easy! To confirm that it worked, type 


Ta-da! 


TextMate themes 

It's likely that you Mac readers 

are currently using TextMate. 
Luckily, Sublime Text offers. 

full support for TextMate 

themes. This means that, yes, 

your Custom colour scheme 

can be migrated over to Sublime Text without an ounce 

of configuration, Simply drop it into your Packages 

tory as is. 


Goto symbol 

Visit any class or list of functions, type ‘Command + 
r', and you'll be presented with a list of all the 
methods on the page. 

As an example, if you're viewing a PHP class, 
Command + r' will list all of the method names. You can 
then use fuzzy searching to instantly scroll to the 
desired method. 

When we combine this with Sublime’s instant file 
switching capabilities, this command becomes 


Jagine that you need to edit style 


particularly helpful. Ir 
css, and, specifically, the .box class within that file: type 


‘Command + p', ‘style@box’, and you're there! 


| <?php 


class { 
public function 
public function 
public function 


Easy CSS with Prefixr 
Prefixr is a web service that automatically applies the 
necessary CSS vendor prefixes to stylesheets. 

With Prefixr, you don't have to remember which 
vendors to use for any given CSS3 property. The 
Sublime Prefixr plug-in brings this functionality direc tly 
to your editor 

Once you've installed the plug-in through Package 
Control, select the contents of your stylesheet, and 
trigger the plug-in by typing Control + Command + x 
Voila! Your file has instantly been updated. Now you can 
use the official syntax, and let Prefixr figure out the 


vendor-specific requirements 


Prefixr 


Cross-Browser CSS in Seconds! 


net tuts+ 


Website Transfers Made Easy, 
Handled by People You Can Trust 


Introducing Nettuts+ 
Fetch 


The 20 Second Example 


Advanced new file 
The less you touch the 
mouse, the better. 
Unfortunately, by default 
creating a new file in 
Sublime Text can take a bi 
longer than we'd like. 
Thankfully, the Advanced 
New F 


Once installed, type 


ile plug-in fixes this, 


Command + Option + n’, and you'll see a new panel 
pop up at the bottom, What's fantastic about this 
plug-in is that you can also create files within folders 
that do not yet exist 

Simply type the full path to the desired new file, and 
you're good to go. 

Let's create a new jQuery,s file within a js/libs 
directory that has yet to be created: ‘Option + 
Command + 1, js/libs/jqueryjs’, ‘save’, ‘Command + Shift 
+p) ‘Fetch’, ‘Single File, jQuery’ We've now, in seconds, 
created a directory tree and downloaded the latest 


version of the library. 


Vintage mode 
Vim users can easily migrate to Sublime Text, thanks 
to its optional Vintage mode. 

To enable Vintage Mode, edit the Default Preferences 
file within the Preferences menu, scroll to the bottom. 
and remove the Vintage item from the ignored 
packages array. 

Now, press Escape, and you're in command mode. 


You'll find that Sublime’s Vi keybindings are quite good! 


Native snippet 
Each snippets in Sublime Text refers to a single file, 
and allows for tab completion and default values. 

To create a new snippet, choose Tools>New Snippet 
In this new file you can, within the <content> tag, insert 
your snippet. You also have the ability to select a tab 
trigger and scope, which ensures that the snippet is 
only accessible from a specific file type. 

Save the file with a sublime-snippet extension 


attached, and test it out! 


siaf 
source.js 


Slaf 


siaf anon function} 
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Versioned snippets 

While Sublime’s native snippets certainly get the job 
done, for larger snippets you might prefer to take 
advantage of GitHub Gists. 


Begin by installing the Gist plug-in through Package 


Control, This will now provide a handful of new option 
within the command palette. 
When attempting to cr 


you first need tc 


> a new Gist, you'll find that 


specify your GitHub credentials. It 


recommended that you create a special account 


pecifically for your snippets. Once you ¢ 0, set the 


credentials and try 


handful of 


again. When you've created a 


nippets, you can list them through the 
command palette, by choosing Gist: Open Gist 


The best part is tha 


when yot xisting snippet 
through gist.github.com, they'll automatical 


available to you it 


Sublime Text. Plus, free version 


control for your snippets! 

Gist: insert Gist onc | 

Gist xc| 

| Gist wxm | 

Gist xi 

lee | 

| | 

|i var View = Backbone. V Am 

| : funct 3 

| x | 

| } | 
H; 


Distraction-free editing 
Sometimes, we need to filter out all of the additional 
fluff that gets in the way of our coding. 

Use Distraction Free Mode to take this idea as tar as 


possible. This option is available, via the View menu. 


Select Enter Distraction Free Mode or use the keyboard 


shortcut, Ctri+ShifttCmd+F 
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Build systems 

Sublime’s build system allows you to apply 
keybindings, which can be piped through to a 
multitude of external programs, such as CoffeeScript, 
Sass, Grunt, and more. 


Rather than tching to the Te 


rminal to run y 


build commanc in accomplish the same thing 


from directly within the editor 


Let's use CoffeeScript as an example. Begin by 


creating blime-build file 


t, paste 


“cmd”: [“coffee”,”-c”, “Sfile”], 
“selector” : 
“path” 


“source.coffee”, 
“/usr/local/bin/” 


cmd specifies the command that should be executed, 


long with any arguments and flags. In this case, we're 


running the current file through the CoffeeScript 


compile command. Secondly, path is only necesse 


Script is not installed in your base 


ed the fil 


Build 


Once you've say anew ¢ val will be 


available through Tool: system, Choose 


CoffeeScript. and nov you run the build 


command with Cmd e current CoffeeScript file 


will be compiled 


Automatic 


Build 
C++ 


Build Results CoffeeScript <r 
V Save All on Build D 
Erlang 
Haskell 
Ant 
JavaC 
Make 
Python 
Ruby 


Record Macro 


Save Macro. 


New Plugin 
New Snippet. 


Sort via CSScomb “OC 


New Build System. 


Multiple columns 
Prefer to edit multiple files within the same window? 


Sublime offe 


sffers a handful of options for generating 


plit views, including rows and columns. Browse lo 


View>Layout to view the available choices, and be sure 
to memorise the keyboard commands as you'll be 
using this feature often. 

f z ] 


placehold 


dl - Placeholder 
form - Placeholder 
Image - Placeholder 
nav - Placeholder 

ol - Placeholder 


Snippet 
Snippet 
Snippet 
Snippet 
Snippet 


Live CSS colouring 
The Live CSS plug-in, though somewhat simple, can 
be quite helpful. 


This plug-in will automatically set the background of 


any colour value in your stylesheet equal to what 


you've specified. Certainly it’s a small convenience, but 
t can be quite useful nonethelk 
olor: ME; 
. ’ 
T gint- gs 
larg . 0; 


Indentation guides 
Asurprisingly rare convenience found in Notepad++ 
is indentation guides, 

Often 


when browsing massive f it can be difficult 


thout a bit of help, Sublime 


indentation guides provide helpful visuals to fix thi 


Development version 

Don't forget that Sublime Text 2 is still in the process 
of actively being developed. 

aged to 


You're encour use the development versior 


of Sublime T 


available at sublimetext.com/dev. 
Don't worry; even though these are development 


versions, you'll rarely come across any bugs. 


Dev Builds 


Download 


di,tab 
form,tab 
img,tab 
nav,tab 


ol,tab 


Easy configuration 

Sublime Text is sometimes criticised because it does 
not offer a flashy interface for managing 
configuration options. 


Ironically, the fact that Sublime literally displays an 


editable JavaScript object for configuration is one of its 
greatest strengths. This makes the process of tweaking 
Sublime’s settings exactly to your needs as simple as 
humanly possible: 

For instance, to disable the Indent Guidelines, open 


the Default Settings file. 


(with Cmd+), and set its value to false 


search for draw_indent_guides 


Live searching 
When we need to search a file, we often resort to 
bringing up a Search and Replace panel, which takes 


up unnecessary time. 

Instead, just press Cmd+l to perform a live search on 
the current file. As you enter your query, the cursor will 
nstantly be repositioned to the next occurrence of the 


string, saving you time. 


| <?php 
| class { 
| public function O {} 
public function O {0} 
| public function O {} 
) t 
uuo 
[esuat MODE. 1 manh Tah Sier 4 


File-switching in milliseconds 
If you're still manually referring to the sidebar to find 
the desired file to switch to, you're doing it wrong. 
Sublime’s instant Goto anything feature is incredible, 
and is faster than you've ever experienced in an editor 
Type ‘Command + p’ to bring up a list of all the files 
in the current project. You can now use fuzzy searching 
to choose the file that you wish to switch to. Need a list 
of all the JavaScript files? Type `js'. You'll find that as 
you type your search Sublime Text will, with lightning 
speed, switch to the upper-most file that matches up to 
your search query. 
This is the preferred method to navigate to new files. 


Remember; the sidebar is a last resort 


file.js | 
file.js 


| file.coffee 
| file.coffee 
style.css 
style.css 


index.html 
| index.html 


| class.php 
class.php 


script.js 
script.js 


more.js 
js/more.js 


jquery.js 
| js/libs/jquery.js 


Key bindings 
Sublime provides the ability to easily set key bindings 
to trigger any command. 

Consider the binding for moving a file to a different 
window, when working with multiple columns, By 
default, we'd need to press Ctri+Shift+2; however, this 
can be a bit difficult to remember, Let’s instead remap 
this to Option+2 

While we could edit the default keybindings file, this 

; a bad practice, due to the fact that any Sublime 
update will reset your customisations. Instead, it's best 


to edit the User keybindings file. 


“command” : 
®}}, 
“command” : 
PE 
“command” : 


2}), 


“command” : 


33} 


“move_to_ 


eys”: [“alt+1”], 
group”, “args”: { “group”: 
003 { “keys”: [“alt+2”], 


“move_to_ 
“move_to_ 


“move_to_ 


Don't worry if this looks confusing; search the default 
keybindings for the setting that you need to alter, and 


then copy and paste the object accordinaly. 


first = ‘Joe’; 
last = ‘Black’; 
job_title = ‘Death’; 


status ‘On holiday’; 


first 

last 
job_title = 
var status 


var 
var 
‘On holiday’ ; 


Code folding 
Naturally, Sublime 
Text provides 
great support for 
your multi-level 
code folding. 

Let's say that you're working on a 
stylesheet, and want to hide all properties; either 
choose Edit>Cold Folding>Fold All, or press Cmd+K+] 

Nice! Now if you want to unfold all the blocks, just 
press Cmd+KtJ 

The keybindings may take some time to memorise, 


but it's worth the effort 


“i 
t 
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Make Wawe 


ill Jisa i ddad 
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EE he new web audio API - it’s so new it’s still being developed - gives you the tools 
_ you need to add intelligent interactive sound to your HTML5 pages. The good 

news is you can now do almost anything you want with audio, literally building 

synthesizers, sample players and drum machines into your webpages, capturing 

and processing audio from a microphone, or even linking audio and video 

together to trigger sounds from a webcam. The bad news is that many of the 
intron crore web tutorials skip over some of the key details. And while there are some superb 
demos and examples available online, it’s hard to work out what the code is doing if you don’t 
understand the basics. So this tutorial is pitched midway between the two. It shows you how to 
load, play and process multiple samples to create an atmospheric audio bed that would work well 
for a game or a sci-fi series promo site. It also includes some simple tricks to make the music 
different every time the page loads. But it doesn’t try to build a complete modular synthesiser or 
recording studio in your browser. Let’s get started... 


‘Sigh up or he Ace Newstone 


Web audio projects start life as just a blank 
HTMLS5 page. We will use a free editor called Komodo 
Edit from Active State (www.activestate.com) on this 
project because it has some useful editing features 
that help you to write code. Select File>‘New File from 
Template..., choose the HTML5 template and then 
click Open. 


@ 

You'll see a bare-bones HTML document. Since 
this is an audio demo, we'll skip the usual !'DOCTYPE 
details - you can always add them later - and add some 
basic page furniture and supporting functions. We'll add 
a couple of buttons to start and stop the audio, with 
dummy function references. 


As you can guess from the name, the Play and 
Stop buttons call functions that start and stop the audio. 
We'll add placeholders for the functions for now - there's 
alot more code to come later in this tutorial. Add paired 
<script></script> tags and sketch in the function bodies 
between them. 


Before we can do anything with web audio, we 
have to create a container called a context. You can 
create a context anywhere, but it’s good to have it as 
soon as you need it. So we will add a window 


Ths wadeaion dost shew Joao Al proces and ores auton wab spears Tha par ou 
noe aca cfc eos gre 


Th At erate sco win ones A ner ne at iy in a Pe 


STIS pe Cannone Menn nonen o Bra N N n 


initialisation function that runs when the window loads, 


using this bit of code: 


(05) Web audio currently works on Chrome and 
Safari. Firefox is working towards support, but it's not 
available yet. To complicate things, the code for making 
a Webkit context and a standard context is slightly 
different. For now we'll assume we're working ina 
WebKit browser, and show an alert if not. 


var context, buffer; 


We'll use the buffer later. 


i] window. addEven 
false); function init() { _ 


istener(‘load’, init, 


context new webki tAudioContext (); 
//Use context = new AudioContext () ; if 


__} catch(e) £ aes 
(‘Web Audio is not available in 


Tricks 


We have to do a lot of work before we can play 
some samples. First we load the data, then we decode it, 
then we create a sample player, then we can play it. To 
start loading the data, create a new function called 
loadAudioFile with a URL parameter, and add an 
XMLHttpRequest 


function loa AudioFile () { 


I2 var request 


new XMLHttpRequest () w} 


The request uses a GET call to load the data from 
a URL, which is usually a file on your server. Setting ‘true’ 
after the URL makes the request asynchronous, which 
means the file loads in the background while your page 
does other things, without freezing. The data arrives as a 
binary blob in an arrayBuffer. 


var loadAudioFile = (function (url) { 
new XMLHttpRequest () ; $ 
o! j3 request . open( , ‘test.mp3’, true); 


URL is hardcoded here. 


request. responseType arraybuffer’ ; 


That code creates a request object, and tells it 
what to request. But we still need to define a callback 
that does something useful after the data loads. So 
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context .createConvol ver! 
reverbNode buffer = buffertist(@) 


reverbGatrMode = context createGainNode( ) 
{gaintiode .connect creverbiode) 
tenpiode = gainode. 

playSampes() 

4 


function playSanples() 


© Elements Resources Network Sources Tin 


before bufterLoader 
function BufferLoader 
bufferLoader. load 
Buf ferLoader. prototype. load 
© bufferLoader. prototype 
finishedLoading 
playSamples: 4 


we define a function for the request's onload method. 
And then we send the request, We also define a 
separate make-some-noise callback for the 
decodeAudioData method 


var request = new XMLHttpRequest(); 
request.open(‘get’, ‘test.mp3’, tru 
request.responseType = ‘arraybi 
request.onload = function () { 
context .decodeAudioData( 


request. response, 
function(incomingBuffer) { 


request.send(); //Get the data 
} 


The code shown below will play the file once it 
loads. It says ‘Make a sample player, load it with the 
audio file that we just downloaded, connect it to the 
sound card - the destination in web audio speak - and 
then play it” 
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@01 var playAudioFile = function (buffer) { 
var source = context. 
createBufferSource() ; 
source.buffer = buffer; 
source. connect (context. destination) ; 


So there we have our playAudioFile function. 

We can also stop audio by sending a stop message to 
the source buffer. Unlike all the other code, this is simple 
- however, there's a critical gotcha that we need to 
understand, Source buffers play once only. If we want to 
play a sound again, we have to repeat all the code in the 
play function. 


Stop the sound immediately. 


G) Let's recap. The request pulls a file from the 
server and decodes it into a buffer. We play it using a 
buffer source sample player, which reads the decoded 
buffer data. The audio is connected to the context 


ule) ae 


1J P nuit-in input 
as 


=| 2 Stereo) input Ch. 


Selection Sar: @End ()Langth Audio Postion. 
Snap To 0000 mO0%* OOKOOMO0x* OOHOOMO0 s+ 


destination to route it through a sound card. We now 
have enough code to load and play sounds! 


©) It's likely that we'll want to load more than one 
sound file. We could duplicate the code for each file, 
but it’s more elegant to create a single buffer loader 
class, load all the files into an array at once, and create 
source buffers as necessary. The class can then be 
reused in other projects. Something like this is ideal: 


= new BufferLoader( 


[C 
“filel.mp3”, 
//Add as many files as you like 
“file2.mp3”, 

“File3.mp3”, 

1, 

finishedLoading 
//Custom callback function 
); 
bufferLoader. load(); 

012 //Load the files 


© It would be handy if the API included a pre-built 
buffer loader class. Unfortunately it doesn't, so we have 


asics 


Code library i 
Waving, not drowning 


You can use variations of this load-and-play web audio code for any sample-based project 
@@7 var context, bufferLoader, bufferList, gainNode, reverbNode, tempNode; 


The window initO @@2 var possiblePlaybackRates = [0.25, @.5, 1]; 
function createsa gain £ $ 3 peat a a = TER 
node,connectsit to the 003 window. addEventListener(‘load’, init, false); function init() { 


try { 
context = new webkitAudioContext() ; 

} catch(e) { 

alert(‘Web Audio is not available in this browser’); 

return; } 

gainNode = context.createGainNode() ; 

gainNode. connect (context .destination) ; 

gainNode. gain. value = 0.5; 

tempNode = context.destination; 

bufferLoader = new BufferLoader( //Set up the buffer loader 
context, 
C 

“reverb.wav”, //Reverb goes in slot 0 

“dronel.mp3”, //Other files are played 


context destination, and 


loadssome files 


“drone2.mp3”, 
“drone3.mp3” 
1, 
finishedLoading 
finishedLoadingO runs Şi 
automatically once the a 
samples have loaded. It //Load the buffer loader 
creates areverb node, 


bufferLoader.load(); } 

25 function finishedLoading(bufferList) { 

sources = new Array();//A new array 
reverbNode = context.createConvolver(); 
reverbNode. buffer = bufferList[0]; 
reverbGainNode = context.createGainNode(); 
reverbGainNode.gain.value = 0.5; 

reverbNode. connect (reverbGainNode) ; 
reverbGainNode. connect (context .destination) ; 
gainNode. connect (reverbNode) ; 


connectsit, sets its 
volume, and plays the 
audio samples 


playSamples0 plays all 
the samples, except the 


reverb filein slot{O], tempNode = gainNode;//Swap in the gain node 
because you won't 
usually want to hear it fear O; 


7 function playSamples() { 
for (var i = 1; i < bufferList.length; i++) { 
sources[i] = context. 
40 createBufferSource(); 
sources[i].buffer = bufferList[i]; 
//Create a buffer for each loaded file 
3 sources[i].connect (tempNode) ; 
sources[i].loop = true; //Looping on 
sources[i].playbackRate. value 
sources[i].start(@); 
+} 
function stopSamples() { 
for (var i = 1; i < bufferList.length; i++) { 
sourcesL[i].stop(@) ; 


} 


Tostop the sound, call the 
.stopmethod on the 
sample buffers. A time 
offset of Ostops the 
soundimmediately 


3 
function changeVolume(aValue) { 
gainNode.gain.value = aValue/100.0; 


} 
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Free, 
free, free 


JavaScript security 
means you can't 
(usually) use GET to load 
MP3s from other sites. 
Copy all files to your 
server and load them 
from there 


Once you understand how the node 
connection system works, the rest of the 
API makes a lot more sense. Sampler 
players are the simplest elements and 
give you the biggest bang for your coding 
buck. But if you have expert synthesizer 
skills, you can build your own sound and 
music networks out of oscillators, filters, 
delays and line generators. Oscillators 
make pitched sounds, filters control the 
tone and add squelch or fartiness, delays 
create echo effects, and line generators 
control how settings change over time. 
Game designers can also use positional 
audio to place sounds in a virtual space. 
If you make a complex network, the 
code can soon get fearsome, but there 
are plenty of libraries andexamples 
online to get you started. There's an 
excellent list of resources at: 
techslides.com/htm15-web-audio-api- 
demos-and-libraries 
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to roll our own. There are three sections to the definition: 


the local variables and public interface, the main code 
prototype, and a prototype for a load method. The 
variables and interface are straightforward. 


var bufferList, sources; 2 
//Arrays of decoded audio files and buffer 


st, 


console. log(‘function BufferLoader’); 
bufferList = new Array(); 
this.context = context; 

this.urlList = urlList; 

this.onload = callback; 

this. loadCount = 0; 


The main class prototype is an expanded and 
generalised version of the XMLHttpRequest code. 
There's some extra error checking and some alerts, and 
it loads the audio data into a slot in the buffer list array 
instead of a single buffer. But otherwise it's similar to the 
code we created earlier. 


var request = new XMLHttpRequest (); 
request.open(“GET”, url, true); 


= “arraybuffer” ; 


var loader = this; 
request.onload = function() { 
loader . context . decodeAudioData( 
request. response, 
function(buffer) { 
if (Ibuffer) { 
‘ + url); 
return; 
} 
bufferListCindex] = buffer; 
015 if (++loader. loadCou 


= function() { 
der: XHR error 


© The code for the load method is simple. It 


just steps through the array of URLs that we defined 

in step 12, and calls the load buffer method on every 
item. That leaves us with one final job - defining the 
finishedLoading function that processes and plays the 
files after they load. For more details about this, see the 
next step. 


T BufferLoader.prototype.load = function() { 


The finishedLoading function is called when all 
the audio files have loaded and are ready to play. We 
could put the main play code here, but we want it to play 
audio when the page loads and also when the user 
pushes the Play button. Therefore we will offload the 
main play code to a function called playSamples, and run 
it from here. 


OOI function finishedLoading(bufferList) 
‘i sources = new Array(); 
//Create a new sources array 


(a7) Once you have an array of files, you can play 
them independently - for example, to make a drum 
machine. For this project, we'll play them all together to 
make a big, big sound. And we'll also loop them so they 
keep repeating. The code is similar to step 9, with an 
extra loop to select the sounds. 


01 /function playSamples() { 


_ for (var i =lji< bufferList. length; 
003 i++) { //Step through the sounds 


context .createBufferSource(); 
for each 


@08 sources[i] .connect (context. destination) 


@09 //Connect to the speaker 


_sources[i].start(@); _ 
3 //Play one of the sounds 


To stop the sounds, we loop through the buffer 
list and call .stop on each buffer source. You can now go 
back to step 2 and plug the playSamples and 
stopSamples functions into the onclick methods of the 
Play and Stop buttons. Now, sounds start when the page 
loads, and buttons start it and stop it. 


To control volume, create a gain node and insert 
it between the sample players and the destination, so all 
the audio passes through it. Setting a gain node value of 
O to 1 controls the volume of the sample mix. First, we 
create a gain node in the window init function. 


context .createGainNode() ; 
t.destination) ; 
a 
JOA var tempNode = context .destination; 


Samples isn't called until the audio loads, so it thinks 
gainNode is a forward reference. We can fix this by 
adding a var called temporaryNode as a placeholder and 
swapping in the gain node before playback. We can also 
add a slider to the main HTML, and a changeVolume 
function to set the gain. 


gain node level x 
aValue/100.0; 


gainNode. gain value 
4 // Default slider range is ® to 100.0 


(a) Clap your hands in alive space and you'll hear 
reverb. A convolver node applies a recording of reverb 


- an impulse response (IR) - to audio. You can find IR files 
online, eg www.voxengo.com/impulses/. To use a 
convolver node, load it with an IR file and connect it 
between the gain node and the context destination. We'll 
load the IR data into buffer slot O. 


function finishedLoading(bufferList) { 
sources = new Array(); 


reverbNode = context.createConvolver (); 
reverbNode.buffer = bufferList[0]; 
gainNode. connect (reverbNode) ; 

tempNode = gainNode; 

playSamples(); 


© 100% reverb sounds mushy. It's better to have 
some of the original ‘dry’ sound, so we add another gain 
node just for the reverb to set its volume (fixed at 50% - 
we could control it with another slider, if we wanted to) 
and connect the gain node to the destination node so we 
can hear it. 


sources = new Array(); 
reverbNode = context.createConvolver(); 
reverbNode. buffer = bufferList[0]; 


reverbGainNode = context.createGainNode() ; 


gainNode. connect (reverbNode) ; 
tempNode = gainNode; 
playSamples() ; 

} 


©) Since we don't want to play the IR file - because it 
doesn’t sound very interesting - we'll modify our play 
and stop code so that it skips over it. Slot O inside the 
buffer array holds the reverb data, and the other slots 
hold the audio files, just as before. Change playSamplesO. 
so it begins playing the files in slot 1 and upwards. 
Likewise for stopSamples(). 


ee ed bufferList.leng 
//Skip the reverb file in slot @ 
context. 


Fie E 


sources[i] 


sources[i].loop = true; 
//Turn on looping 
sourcesLil.start(@); 
//Play 
} 
} 
function stopSamples() { 
for (var i = 1; i < bufferList. length; 
i++) { //Skip the reverb file in slot ð 
sources[i].stop(@); 


We'll make the samples play quarter-speed, 


half-speed, or normal speed, This makes the sound 

different every time playSamples is called. As generative 
digital composition goes, it's a very simple trick. But with 

the right samples, it’s surprisingly good at creating 

different music on each play. And it's always in-tune. ' 


001 var possiblePlaybackRates = [@.25, 0.5, 1 
//0.75 can work too 


4 sources[i].loop = true; 
//Turn on looping 


© Now all we need is some samples; freesound.org 
has a huge collection of drones and atmospheres. Files 
with a ‘CC O' licence are public domain. Pick three or four 
samples with different loop lengths so the sound is 
always changing. If you're musical, pick samples with the 
same basic pitch. If not, random noises can be 
atmospheric too... 
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Tricks A 


Dark patterns are 
questionable user-interface 
techniques that some web 
designers employ to nudge or 
subtly trick users into doing things. 
They're known to boost conversion 

rates, but where does the slippery slope 
end? We investigate the web's dark side... 


J Fixes Tricks 


k in the Seventies, sites that signs you up for 
gnitive psychologists a monthly membership WHY DO BUSINESSES USE 


started to realise that through hidden small-print, 


all humans tend to = tarte DARK PATTERNS? 
make the same s 


categories of mistakes, As an industry, we Dark patterns typically boil down to a judgement about ethics. 
which tr named d to take a stan A There is always going to be a tension between what customers 
They had effectively these patterns are accep want - low prices and outstanding service - and what 
found a set of mental Achilles heals are borderline and which should be businesses want - namely maximizing profit. It’s no surprise 
that we're all prone to. stright banne that businesses want to experiment with what's possible. 
It became obvious that this discovery After all, they often find combinations that customers find 


could be applied in different ways. We could acceptable. For example, it's slightly manipulative that 
dge for the benefit of mankind HOW D0 DARK supermarkets put bread and milk at the back of the store 
help avoid things like industrial accidents and to tempt people to walk past the rest of their stock but 
catastrophic errc we could PATTERNS WORK? people don't tend to mind. IKEA takes this principle 
a even further, and turns the entire store into a maze 


use it as a v C , to pon 
our fellow humans. The ir ting thing about dark patterns is - customers might moan a little, but they keep flocking 
In abou cognitive biases became a that they are desig O e e back. Similarly, nightclubs often allow the queues 
hot topic in web design. What's interesting is orpus of knowledge that we use to enhance outside to run around the block even when they're 
the way we as an industry reacted to this usability. This means that if you're d web not yet busy inside, just to attract more passers-by. 
ige. Sadly, we didn't turn the lens of designer capable of creating great user People seem to accept that it is something they 
experiences, you probably already have the need to do to stay in business, and it’s just the cost 
know-how to create some very sinister dark of being a customer with them 
or ‘How can we prevent these patterns. All you need to do is take the usability The real allure to online businesses is that dark 
from tripping our users?’ A lot of web principles you know and then invert them, as patterns push conversion rates up. They tend to 
jners decided to go for the dark side and n in the table below. win in A/B tests and, as far as the analytics data 
ed ‘how can we se biases goes, they appear to be a good thing. In reality 
How can we use them to really push our f : : >» though, there are many things that analytics data 
conversion rates up?’ | doesn't capture. Whenever a customer notices that 
Like ino architects who install bright they've been caught out by a dark pattern, they'll 
lighting and hide c ‘ i develop a negative opinion about the personality 
executives who C alf-truths, a of the brand. If that brand continues to try to take 
number of us have decided to apply our m ~ d i 2 advantage of the customer, they'll begin to hate 
new-found understanding of psychology to them and they'll spread that opinion among their 
create subtly deceptive user interfaces that friends. Even if the company has no ethical qualms 
nudge or trick users into doing things - using % E and doesn't mind being perceived as a bit low end, 
techniques now known as dark patterns. there's still a very real risk that customers will migrate 
Whether it’s low cost airlines that sneak travel to a less frustrating competitor. After all, this is the 


A Journey Map will reveal the exact points where ‘dark 
insurance into your bask ommerci patterns’ will be integrated into a site web - competitors are only one click away. 


C O EXPLOITATIVE 


The system should always Instead of showing key status 
MATCH BETWEEN keep users informed about information, hide it out of 


SYSTEM AND THE what is going on, through sight. Do this with unclear 
appropriate feedback within labels, obtuse navigation and 
REAL WORLD reasonable time. untimely messages. 


World's Easiest A/B Testing Tool 


TRY IT FOR FREE 


VISIBILITY OF The een shouldspeakthe MISCERE nuns 
users’ language, with words, user's language’ the system 
SYSTEM STATUS phrases and concepts should use wording that 


familiar to the user, rather appears to say one thing 
than system-oriented terms. while really saying another. 


USER CONTROL Users often choose system Take advantage of your users’ 

functions by mistake and natural capacity to make 
AND FREEDOM will need a clearly marked mistakes to have them 
‘emergency exit’ to leave accidentally complete actions 
the unwanted state without that are beneficial to your 
having to go through an business objectives, like A/B testing compares two similar pages’ tools to gauge a user's reaction. Sites with 
extended dialogue. Support [feicriencolareienen io dark patterns typically score well but don’t take into account negative human reaction 
undo and redo. information unawares. 


e Trick questions are one of 
the most common types of 


dark pattern, often seen in the marketing 


communication options of registration forms. 

Trick questions rely on the fact that people 
usually scan web pages rather than reading 
them word-for-word like a novel. For example, 
since checkboxes are usually taken to have 
a positive sentiment, some sites use double 
negatives to flummox users and make them 
believe they are opting out when they are 
actually opting in to. 

A tick usually means yes - except when 
combined with a negative statement, tripping 
up many users. 

Another similar deceptive trick is to show 
aseries of marketing options but to alternate 
the sentiment, so that ticking the checkbox 
causes an opt-in on one line, and causes an 
opt-out on another. Users have to really keep 
on their toes to avoid being duped. Here 
users are likely to be confused by the way the 
sentiment is switched on different lines. 

Trick questions are known to boost 
conversions, so they look impressive on 
your analytics dashboard, but they lower the 
quality of the lists generated. What's more, 
they can end up really irritating users, defining 
the personality of your brand in their minds 
as one that's quite annoying. Arguably, if you 
don't mind being perceived as a seedy ‘price: 
‘em cheap, stack-‘em high’ type of business 
then this is just about okay, but on the other 
hand, users only have a limited amount of 
patience and your competitor isn't far away. 
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FORCED CONTINUITY 

This is a particularly devious trick that 
e involves getting users to sign up toa 
paid monthly membership when they think 
they are only buying a one-off product 

One large fashion retailer in the USA has 
recently had a class action lawsuit raised 
against them for using this pattern. Their 
implementation of the trick involved sticking 
a clause in their terms and conditions which 
stated that buying a single item would 
automatically enrol customers into their VIP 
membership program. 

On its own that sounds benign enough, until 
the customer checks their credit card to find a 
repeating monthly charge of a certain amount 

a sum small enough to go unnoticed for quite 
some time. Very cheeky indeed, and most likely 
illegal in the UK. 

Small print can be used to hide all sorts of 
tricky clauses, but surely this is going too far? 


et your FREE (ma, 
Credit Report and Scorn 
A FREE 30-day (0 trial offers 


@ Unimites access to your Ss Credit Report 
Expert advice on improving your financial situation 


@ Help Minding finance deals that sult your credit profile 


our FREE Credit Report 


Why do In 
manage i 


SNEAK INTO BASKET 
This pattern was 
@, popularised by low- 


cost airlines who have a habit 
of sneaking insurance into 
users’ baskets when they're 
trying to buy flights online. 
Most eCommerce websites 
show an upsell page prior in 


Tickets from £25 


No added fees 


D 
BAIT AND SWITCH 


This involves enticing users in with an 
£, attractive sales pitch, only to reveal a far 
less desirable outcome. Bait and switch is one 
of the oldest tricks in the book, and it even 
features in fairy tales like Rumpelstiltskin. In 
spite of this familiarity, it’s still an effective trick 
on the web. One popular implementation used 
on travel sites is to hook the user in on a low 
price, cleverly labelled with the prefix ‘From...’ 
then showing a high price when they select 
their specific dates and configuration at a later 
stage. An even more worrying variant of this is 
allegedly being tested by some unscrupulous 
online retailers (a type of ‘dynamic pricing’) 
whereby the cost of tickets or other time: 
sensitive items are automatically increased if 
a user returns to a product detail page after 
viewing it a few days previously - not because 
of increased scarcity, but simply because of the 
user's behaviour pattern. 


Your Basket 


+} London Gatwick to Majorca 
(Palma) 


Dep Sun, 25 August 2013 
19:50 

Arr Sun, 25 August 2013 
23:10 


Flight 8635 
1 Adult 1x£33.49 


their checkout flow, serving the purpose of enticing you into buying 
extras and add-ons. For airlines, travel insurance has one of the best 
profit margins among the upsells, so some sites subtly preselect this 
option, requiring the user to take action to opt out, rather than to opt 
in. This additional ‘cognitive friction’ is enough to push sales, and many 
users don't even realise they've bought insurance until it’s too late. 
Often when they do realise, the price point is so low (usually around 
£10) that they feel it’s barely worth the effort to call up and jump 
through a load of hoops to cancel it. 

If a user doesn't stop to read the details here, they'll end up buying 
the insurance upsell without even realising 


Majorca (Palma) to London (E 
Gatwick 


Dep Fri, 30 August 2013 
23:50 


Arr Sat, 31 August 2013 
01:20 


Flight 8636 
1 Adult 1x£17449 


‘Subtotal flights and options £207.98 
for all passengers: 


Final Price£207% 
Pay by Credit Card: £213.18 
Pay by Debit Card: £207.98 


Biting method: Online and paper 


Change biling type: © Paper-troe 
Vew bils oniine and stop my paper bil. 


Online & paper 
Vew bils onlne, but stil send me a bil in 
the post. 


FARAWAY BILL 

If an organisation hides a user's bills, 
r then it's easy for them to overspend. 
This is a grey area, and it's not clear if it is a 
dark pattern in all cases. Under the premise 
of green initiatives, many organisations have 
switched to eBilling, where they need to log 
in, navigate to the appropriate area, and click 
through a number of menu items. This is 
unlike the days of paper bills where all you 
had to do was open an envelope. Since many 
billing systems run on legacy software that is 
hard to update, some might argue that this is 
just bad design rather than actively nefarious. 
Either way, more effort needs to be made to 
communicate with end users. 


FRIEND SPAM 


Apps and games ask for permission to 
Q access to your account. Some exploit 
this and secretly publish content as if it is 
was written by you. One person gives an app 
access to their account, it then publishes an 
endorsement that appears to be written by 
the user. Following this, a few of their friends 
see the post, trust it as a reliable source, 
they all register, and the app publishes more 
endorsements. This permissions dialogue 
is asking a user to allow a game to post 
endorsements. But how can a user endorse 
something they've yet to see? 


PRIVACY ZUCKERING 


When social networks first appeared, 

many consumers didn't realise that ‘if 
you're not paying for the product, you are the 
product’. It's in a social network's commercial 
interests to collect your personal information 
and expose it in ways that are commercially 
beneficial, such as behavioural ad targeting, 
using your face to endorse products, or 
encouraging you to post about brands. However, 
they need your legal permission to do this, so 
how do they get around it? Funnily enough, 
they don't have a large button that says ‘sell my 
personal details to advertisers’ - they'd go out 
of business. Instead they obfuscate their user 
interface in such a way that hides your settings 
and makes it hard work for you to get the exact 
level of privacy that you want. Of course there's 
nothing wrong with a business model that 
relies on targeted advertising, but it needs to be 
transparent and honest if it's going to earn the 
trust and respect of their user-base. 


ROACH MOTEL 


This is when a site has fantastic usability 
Q in registration, but is difficult to leave. 
Most websites have a lot of attention focused 
on perfecting their sign-up process, because 
this is where membership revenue comes from. 
However, churn is always a problem: a business 
needs to keep the inflow higher than the outflow 
or it will die. The best solution is to provide a 
good service, tempting users to stay of their own 
accord. However, the dark pattern approach is to 
try to trap them, to generate more revenue from 
recurring membership fees. For example, instead 
of having a Cancel Account button, the business 
could require the user to ring a call centre. This is 
more effort, so the user might delay, generating 
more revenue. When they do finally call, the call 
centre operative can try to convince them to 
stay, offering a last-ditch discount or freebie. 


Mac users in affluent areas have been targeted by eCommerce 
companies, displaying higher prices for products 


USER PROFILE PRICE 
DISCRIMINATION 


It's easy for a server to find a user's 
Q location and platform, but is it ethical for 
an eCommerce site to alter prices if they think 
you're rich? A recent Wall Street Journal article 
(on.wsj.com/Tj1W2V) found that a number 
of different US eCommerce companies were 
detecting users' locations and serving up higher 
prices to people in richer areas. The companies 
argued that this was done simply to match the 
prices in their local bricks-and-mortar stores. 
Users were understandably upset when they 
found out, because the price changes seemed 
arbitrary and punitive - it's not as if it was 
costing the company any more to serve each 
different location. It's interesting to consider 
that price discrimination is a very grey area. 
For example, people dont mind the fact that 
tickets go up in price nearer the date. In the UK 
we're used to paying more for electronic goods 
than the USA. But it seems that profiling users. 
without their knowledge is an act that mixes 
privacy concerns with unfair discrimination, and 
many people find this too bitter a pill to swallow. 


CONCLUSION 


Back in the fifth century, Greek physicians 


realised the power that came with their 


newfound knowledge, so they wrote the 


Hippocratic oath. Should we do the same in 


web design? It's clear that the combination of 


applied psychology and user interface design 


can be very powerful. Heavy-handed regulation 


rarely ends well - we all know how the cookie 


law panned out - so isn't it time we take 


matters into our own hands and 


upon a set of rules to work by? 


thing's for sure: if we continue 


to ignore it, this problem 


is only going to 


get worse. 


Use tiled mosaic 
Site layouts 


inspiration www.oscar-charlie.de 


ne of the more recent of the masonry layout and applies a grid 
trends in web design has structure to a mosaic image layout. The whole 
been filling the web of this layout is one long, endlessly sliding 
browser width with carousel. This provides a great interface by 
content. An extremely which customers can move through a lot of 
good way of doing this is content in a visual way. The site has been 
with masonry layouts, designed this way to link to an employee 
which have become rather mobile app, which allows for real-time 
popular since Windows 8 status and photo uploads. This 


the humble tile when combined with slick, 


stylish animation. Oscar Charlie takes a variation experience these uploads. 


Many sites load content 
rolled out, giving us all a new appreciation for provides a simple and intuitive way via Ajax to give the illusion 
for customers and other parties to of moving pages when 
links are clicked, but the 
URL doesn’t change. 


INSPIRATION 
Bringing real-time 
information to all 


The web is the place where you connect 
to your audience. However, If the 
messages that you are sending are 
uninteresting and smack of marketing 
speak, then you won't connect with 
anyone. Oscar Charlie manages to make 
the browsing experience fun and 
interesting in a way that is novel to the 
end user. If you are going to mess about 
with browsing conventions then you really 
do have to ensure that the experience 
presented is clearly better. Taking 
inspiration from mobile app content, 
which slides in and out, Oscar Charlie 
has connected Its real-time information 
to the web by using the same sliding- 
in-and-out experience. 


Content Mosaic grid Sideways 


Scroll 


The site’s content is easily 
accessible via a menu bar 
across the top of the page 
in the browser. The page 
is formatted specifically 
for the width and height 
of the browser. 


This page of the site 
uses a mosaic grid 
to display the 
content. This is 
displayed asa 
continuously 
scrolling view pane 
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Clicking on one of the tiles in this 
display causes the page to slide 
sideways with the new content sliding 
in from the right. This provides a 
pleasing way to slide back and forth 
between the new content, and is 
influenced by mobile navigation. 


Hovering the mouse over one 
of the tiles causes the others to 
fade slightly. The hovered tile 
displays information about the 
image over the top, while a 
background tint makes the 
text easier to read 


More information about this 
page is available farther down, 
which can be scrolled to. This is 
a slight drawback of the design 
as in this view it isn't 
immediately obvious that 
there is more content 


is done in traditional graphic design and is emulated in online grid systems 


Grid systems 

“Laying out any information neatly on a grid is the key to all good design. This 
| 
| 


| 


What our 
experts think | 
ofthe site | 


Mark Shufflebottom 


such as 960.gs, Bootstrap, foundation, etc. Laying out a montage of images in 
a grid works well because it presents a lot of information in a clear way.” 


TECHNIQUE Develop a montage layout 


Get the library 

Like most projects, we can kick start ours by 
using jQuery and the Automatic Image Montage 
plug-in, so download this from tympanus.net/ 
codrops/2011/08/30/automatic-image-montage. 
Create anew HTML document in this folder, and in the 
head section we'll link to the stylesheet that will style 
the images. You could add a border to each image, or 
make them flush against each other here. 


øði <link rel=“stylesheet” type=“text/ 
css” href=“css/style.css” /> 


02 Add page content 

, d Move into the body section and we'll create a 
container div tag to hold everything. Inside here we'll 
add another div tag to hold the montage. Finally we add 
the images. Feel free to add as many as you like here 

- the image folder has 73 images named numerically. 
The code for this step is on the resource disc. 


@à Link to the library 

After the closing div tag of the container div, we 
can add our links to the appropriate JavaScript libraries. 
The first line of code links to the CDN jQuery library 
online. The second links to the minified version of the 
montage library that will power our layout here. The 
code for this step is also on the CD. 


04 Count the images 

» Here our container for the montage is recorded 
together with the number of images within the 
montage, and each one is hidden from the display. 
Then each of the images is looped through with a load 
function to see if they have loaded into the browser. 


GOH $(function() { 
002 var $container = $(‘#montage’), 


003 $imgs = $container. find(‘img’) 
-hide(), 


004 totalImgs = $imgs. length, 
005 cnt = 0; 


006 $imgs.each(function(i) { 


007 var $img = $(this); 
008 $(‘<img/>’).load(function() { 


Display the montage 

Once all images have loaded, they are made 
visible again and arranged within the display to fill the 
browser. Save the page and test in the browser to see 
the images load in a style very similar to the website. 


01 ++cnt; 

002 if( cnt === totalImgs ) { 

003 $imgs.show(); 

004 $container.montage({ 
005 fillLastRow : true, 
006 alternateHeight : true, 
007 alternateHeightRange : 
{min:18@, max:240} 

008 De 

009 } 


lð }).attr(‘src’ ,$img.attr(‘src’)); 
O11 }); 
012 3); 


@13 </script> 


The Automatic Image Montage plug-in for jQuery is 
very easy to use and can fill a webpage with images. 
The plug-in contains a number of different attributes 


that allow the layout to be customised 


e «ai 


TECHNIQUE 
Re-create the 
header section 


The Oscar Charlie website has a very 
minimal header, but if you look very closely 
there is some fine detail of ruled lines. Here 
we show you how to make an image tile to 
achieve the same effect 


ol Open Photoshop 


Open Photoshop and create a new 


document. As you can see we have made 
this quite small, so it will load quickly and will 
easily tile. Make your image 10 x 10px and 
click OK to create. Once created, zoom in, as 
it will be small on the screen. 


02 Fill the background 


Choose a dark grey like #333 as your 
foreground colour and use the Paint Bucket 
to fill the background. In the image, the grid 
is shown only because the image is zoomed 
in. Now choose a lighter grey as the 
foreground colour, like #aaa. 


Draw the line 


Switch to the Pencil tool and draw a 


line across the bottom row of the grid, which 
will lend a ruled line to the image. Save this 
as a GIF and use CSS to conjure up the 
background, and then simply repeat the 
image in the background to ensure you get 
the subtle lined effect. 


Web Design Tips, Tricks, & Fixes 115 


Create touch- 
responsive 
web content 


With the increase of browsing on 
portable devices, we take a look at 
making content touch-enabled 


tools | tech | trends Dreamweaver, a touchscreen device (tablet) ; 
+ Start folder 
+ Finished folder 


ou may think that making websites responsive to touchscreen devices is a bit redundant, 
given that these devices can interact with most of the standard website functionality 
found online. That is true, but as this market continues to expand we can take advantage of 
the unique input that is on offer through such devices, and give an enhanced experience for 
those specific users. 

In this tutorial we are going to offer the kind of functionality to our web content that you 
are more likely to find inside a native app. We are going to take three div tags and give them 
the functionality of letting the user drag them around the screen (which has been possible 
on the desktop for quite sorne time). But, we're taking this one step further - we will allow a 
pinch gesture to scale the content up and down. Not only that, but we'll take the rotation of 
the two fingers and apply that to the div as well. Applying this to the div might seem a little odd, but add 
images to those divs and you have a sortable photo stack, just like you see on those BBC spy dramas! 
Note: we will not take any responsibility for you sitting in a darkened room using the contents of this 
tutorial to brief your minions. 


o Getting started 
Copy the start folder over to your computer 
from the resource disc and launch Dreamweaver or a 


pa E Sarre: similar code editor. Create a new HTML page and in the 
m Fe} c56 new reature overview 
a z cae Figg] Pe cra uous head section of the code add the meta tag, as shown, 
lie q cs TA] tuses cama authoring for the viewport to stop scaling on mobile devices - 
i Rien [da c35 Transitions ran! then we'll add a link to the jQuery library as well. 
Tou (aad) 
" Fuld Gria Layout- [|| very Mobite Swatches n . 
A Dieman ee G02 <meta name=“viewport' 
1 Bh Business Catalyst Se 


content=“width=device-width; initial-scale=1.0; 
maximum-scale=1.0; user-scalable=0;"> 

02 <script src=“https://ajax.googleapis.com/ 
ajax/libs/jquery/1.7.2/jquery.min. js"></script> 


xchange» 


As this market continues to expand we 
can take advantage of the unique input 
that is on offer through such devices 
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Setting content 

Move down into the main body tags of your 
document now, and we'll add the code shown here. 
First and foremost we want some instructions for our 
site visitors, so the paragraph will take care of that for 
us. Next we add a div tag that contains a unique id and 
amore generic class, which will help us with 
functionality later. 


001 <p class=“inst"> Touch to move, pinch to 
scale and rotate</p> 

<div id=“movel” class=“photo”> 

</div> 


Finish the content 

We add two more div tags to our page now, so 
this will generate three thumbnail photos on the 
document. These will be able to be scaled, rotated and 
moved later. The ids enable the addition of a separate 
image into the background using CSS so that there is a 
unique look to each of these div tags. 


<div id=“move2” class=“photo"> 
</div> 
<div id=“move3” class=“photo"> 
</div> 


04 Setting the page style 

We'll move back up to the top of the document 
now and into the head section of the code again. Add 
the opening style tag as shown followed by the styling 
for the body, This makes the background fullscreen by 
setting the height and min-height to 100%, but 
sometimes scrollbars are added, so set the overflow to 
hidden to prevent this. 


<style> 


body { 
height: 100%; min-height: 100%; 
overflow: hidden; 
background-image: url(images/bg. jpg); 
background-size: 100%; 

R 


5 Style the instructions 

The next style element that we are going to 
make is the instructions. Here, we make the colour of 
the text similar to the colour in the background image, 
and we set the size of the type and add a 4px drop 
shadow to add definition. There is no offset on either 
the x or the y axes, so the shadow will just sit behind the 
text with 70% Opacity. 


001 „inst 


color: #efdfe4; 
font-size: 1.6em; 
text-shadow: @ @ 4px rgba(@,0,0,0.7); 


003 
004 
005 } 


06 Add the photo 


We are now going to add the styling for the first 
photo. We position this absolutely so we can then move 
it to any position on the display later, to coincide with 
our touch move. Once we've gone and set its position 
to 50px in from the left and 100px down from the top, 
we add the image and make it fill the size of the div. 


001 #movel {position: absolute; top:100px; 
left: 5@px; 

background-image: url (images/golden. jpg) ; 
| background-size : 100%; } 


07 Second photo style 

The next photo style is pretty similar to the first. 

Notice that we are again positioning it 100px down from 
the top but are moving it to 300px in from the left. Each 
image will be a standard square of 200px in width and 

height, so this allows for 50px spacing between each of 
the images on the display. 


001 #move2 {position: absolute; top:10@px; 
left: 300px; 
background-image: url (images/london. jpg); 
background-size : 100%; } 


08 The final image 
We now add the final styling code for the unique 
properties of the images. Again, we've moved it further 


along the display at 550px to give us that extra bit of 
spacing, and we've added a brand new, different 
image in the background. All three of the images 
contain similar styling - this will be handled by the 
photo class in the next step, in order to keep the CSS 
for each to a minimum. 


Bð #move3 {position: absolute; top:100px; 
left: 55@px; 

002 background-image: url (images/durdle. jpg) ; 
003 background-size: 100%; } 


Borders and shadows 

Each of the images have some similar properties 
to them, so these are added as the photo class. We 
make the border and size the same, but we also add a 
drop shadow. Despite the fact that the Chrome browser 
on Android is a WebKit browser, it doesn't take the 
Webkit prefix for the shadow. This shadow will help give 
definition to the images. 


„photo { 

width: 200px; height: 200px; 

border: 5px solid #eee; 
border-width: 7px 7px 2@px 7px; 
-WebKit-box-shadow: @px 2px 15px #333; 
box-shadow: @px 2px 15px #333; 


</style> 


<Farleft> 

«We style the page so that the background fills the browser 
dimensions with an image and the overflow is turned off to 
prevent scrollbars 

<Left> 

+The instruction text is styled to be slightly lighter than 

the background, with a CSS3 text shadow applied to help 
itstand out 


<Below, left> 
+The photo is styled up with a unique image, a border, anda 
drop shadow to help lift it from the background image 


+ Once all three images are styled up appropriately, we can 
move on to adding functionality to the content on the screen, 


making it touch responsive 


10 Set the script area 

Save the page and test it in a browser to make 
sure the three images work. We are going to add the 
script section in the body tags of the page, just before 
the final closing body tag. Note we have a script section 
defined and a jQuery document-ready short hand 
function. Our code will be added where the comment is. 


<script type=“text/javascript”> 
function ($) { 

//code will go here 

H(jQuery)) ; 

</script> 


Detect touch move 

Add the following - it binds the touchmove event 
with any div that contains the photo class, The 
touchmove isn't an event recognized by default in 
jQuery, hence binding it. We then detect that the display 
is touched and grab the x and y location but half the 
width of the photos, which are 200 x 200px. 


001 $(“. photo”) .bind(“touchmove”, function(e) 
{ 
002 var targetEvent = e.originalEvent. 
touches[@] || e.originalEvent. 
changedTouches[0]; 
var tempX = targetEvent.clientX-100; 
var tempY = targetEvent.clientY-100; 
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> ae 


waw webspacelnvader corvtouch’ 


Here you can see the frst mage being moved, but by defauitit moves behind the others 


because it was added to the 


“arg etc merger they but if we bring all 


toa higher z-index, the same problem remains 


that will leave the last touched photo at the top of the display 
<Below, left toright> 


+ By recording the z-index order we can ensure that each photo is placed on the right z-index 


+ Once all the code is added we can scale and rotate the images when two fingers are added to 
the image. Dragging still works while we are scaling and rotating 


+The solution presented works across iOS, Android and Blackberry Playbook tablets, meaning 
tablet/smartphone-specific 


= you can add this as 


Finish the touchmove 

Once we have the x and y location we need to 
move the appropriate div to that position. Add the css 
properties for the left and top position to the selected 
photo Image. The ‘prevent default’ code stops the page 
from being scrolled as the user moves their finger 
around the screen. Save and test your page on a device. 


‘top’ : 


004 }); 
B Defining the touchstart 


” After testing, one problem is that as you move 
one image over another, the page's stacking order is 
retained. We can change that by lifting the z-index order 
when the user initially touches the screen. This code 
makes the selected photo appear above the others on 
the page. Again, save this and test it on your device. 


$(this).css({‘left’ : 

+ tempY + ‘px' 3); 
e.preventDefault(); 
return false; 


+ tempX + ‘px’, 


BOT $(“.photo”).bind(“touchstart”, function(e) 
$ 

02 
ooi 
005 }); 


e.preventDefault() ; 
$(this) .css({ ‘z-index’ 
return false; 


*500' 3); 


4 Letting go of the photo 
The last code lifts an image while pressed, but 
once all of the images have been touched, the same 
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functionality in your sites 


problem still exists, in that the last image selected is not 
the top-most image on the page. As part of the solution, 
let's add the next section of code for when a user takes 
their finger off of the display. This then changes the 
z-index back to 100, It's still not fixed but it’s the first part 
of the solution, 


Bi $(“. photo”) .bind(“touchend”, function(e) 
{ 


gð =e. preventDefault(); 
$(this).css({‘z-index' : ‘100' }); 
return false; 


005 }); 


» Define some variables 
We are going to have a z-index value set in 
memory for each of the photos. This could just as easily 
be saved in an array if you are going to have a larger 
number of photos, but in this instance having a 
separate variable for each will suffice. Place these just 
after the JavaScript opening tag in the document. 


øði var z1 = 100, z2 = 100, z3 = 100; 
002 var scale = 1; 


16 Change the depths 

Go back to the touchend function and remove 
the css line, as this is not required now. Instead add the 
code as shown. This detects whether the photo being 
released by the finger is the movel div tag. If so, it is set 
to have a value of 100, while the rernainirig lwo z values 
are set below this. 


The z-index is a CS 
stacking elements in the DOM over 
each other. It's not a true z depth, 
like in 3D, just a way of ordering what 
is in front or behind, so an element 


order will always 


with greater stac 
be in front of an element with a 


lower stack order 


if (e.target.id == “movel") 
{ 

zl = 100; 

ARES 


w 
} 


A Continuing the concept 

Add the next section of code that builds on the 
last section, again identifying the move2 div container 
and setting the z value to 100. If the first had been 
selected prior to this, then the z order would place the 
third photo at the bottom, then the first and this second 
one would be at the top of the order. 


001 if (e.target.id == 
{ 
Zio, 
z2 = 


00 
i) 
} 


“move2”) 


Last order sorted 

Now we add the if statement for the last of our 
three photo div tags. It's interesting to note that 
etarget.id is the same as the jQuery command $(this). 
The etarget.id is regular JavaScript that takes the event, 
then the target of that event, and grabs the actual id 
name. It's always useful to know both! 


@@i if (e.target.id == “move3”){ 


002 «zl --; 
003 z2 --; 
004 23 = 100; 
005 + 
Set the z-index 


P As we have sorted whichever photo has been 
selected, we now write the values of the z variables into 
the z-index CSS property with the next block of code. 
Remember this should be inside the touchend function. 
Save this and give it a test; you will have self-sorting 
images, with the last selected always on top of the 
display stack. 

GOT $(‘#movel').css({‘z-index’ : 
002 $(‘#move2').css({‘z-index' 
v3 


+z }); 
faze 


@03 $(‘#move3').css({‘z-index’ by 


D; 


Library link up 

We're going to detect the scaling and rotation of 
two fingers on the photo. In order to do that, we need 
to get access to those specific properties. This is easy in 
iOS, but not so easy on Android or Playbook, so we are 
going to link to the hammers library. Add the two lines 
shown in the head section of the document. 


OOL <script src="hanmer.js"></script> 
@02<script src="jquery.specialevent. 
hammer . js"></script> 


The transform event 

The next section of code should be added after 
the touchend function. This saves the photo class into a 
variable and applies the transform function to every 
instance of that class. In this code we are just stopping 
the regular event propagation of moving the screen, 
which if pinched would zoom. 


@@1 var $ph = $('.photo'); 
OO $ph.on(‘transform’, function (event) { 
003 = event .preventDefault() ; 


HAMMER JS 


sript library for multi-touch gestures 


View Hammerjs 


ON GITHUB 


Bust a few moves... 


5 


DOWNLOAD SOURCE 
t 


5 just 2kb (minified) 


Fes gia 


Scale and rotate 

The transform function automatically gives 
access to rotation and scale; as such we can simply 
write those factors into the CSS. We use the event prefix 


to get access to both the scale and rotate. The WebKit 
transform CSS3 property sets the values. Save this and 
test the final project. You should ideally test it on a tablet 
device such as an iPad or Android tablet, so you can get 
to grips with the functions when using a slightly larger 
touchscreen than a smartphone. 


OOL $(this).css({‘-WebKit-transform' : 
‘rotate(’ + event.rotation + ‘deg)’ + ‘scale(' 
+ event.scalexscale + 


002 ')'}); 
003 3); 


tutorial 


You can find other code examples on 
the GitHub page for hammers, but 
our code is the most condensed, 
easy to understand, and offers more 
functionality (move, scale and rotate 
all at once) than their own demos. 


Gesture 
oniOS 


Detecting gestures such as 
pinch and zoom is very simple 
to doon iOS devices because 
they have the JavaScript events 
ongesturestart, ongesture 

and ongestureend. These 

bring back properties such as 
rotate and scale very easily, 
ready to manipulate the DOM 
with. However, if you take a 
document using these events 
onto Android or Blackberry then 
quite simply there is absolutely 
no response. The W3C has 
specified touchstart, touchend, 
touchmove, touchenter, 
touchleave, and touchcancel as 
valid event types. As youcan 
see the gesture event is not valid, 
and that's why it doesn't work 

as a cross-browser solution. In 
order to get this working across 
different devices, we have used 
the hammerjs framework (as in 
MC Hammer of Can't Touch This 
fame), from eightmedia.GitHub. 
io/hammerjs. 
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EAA 


Use hover and 
transition effects $ 


When the site loads, 
inspiration substrakt.co.uk 


the image slider is 
hidden from view. 
After a quick delay, the 
he rise of CSS3 has seen a page opens to reveal 
whole new collection of te naga sider 
methods for creating cool 
and contemporary styling 
that used to need jQuery at 
its side to be achieved. CSS 
transforms and transitions 
mean that CSS is now far 
more capable of creating animation 
effects without the need for any external 
code. CSS transitions could be construed 
as hover effects on steroids, but that 


background image size. The opacity can 
be played with to create the right 
amount in the start and finish states. 
Hover effects, it seems, have been 
around since HTML was invented and 
they are still a popular technique. The 
beauty of hover effects is that they can 
be manipulated to appear in a host of 
guises. They are relatively quick to build 
and offer good browser support | 
The typical approach for creating Slider ——— 
navigational elements is to use an An image slider is used | 


Platform 


ation gets 


to present a specially 


would be doing them an injustice as they 
have so much more to offer. Transitions 
can add a smooth transition from one 
state to another. Adding opacity into the 
mix allows the transition to go from a 
solid colour to an translucent state, or 
the opposite. This is a technique seen on 
the homepage of the Substrakt site with 
the addition of increasing the 


Cut the clutter and 


unordered list and add the hover effect 
on the active link. Nothing wrong with 
this, but to go more HTML5-friendly the 
<nav> tag can be styled to achieve much 
the same effect. This requires less code 
and is easy to display horizontally or 
vertically. Adding an underline, as shown 
in the Substrakt site, is a simple but 
effective hover effect using only CSS. 


selected collection of 
projects which 
animate at timed 
intervals or can be 
operated manually. 


Web fonts 


Web fonts are called 
into action across the 
site with the notable 
addition of an 


keep it responsive 
“Too many websites are cluttered. We wanted to eschew this, 
| instead focusing on a minimal, open layout that showcases our 


BE 


<comment> | client work: no chaff, no fluff. A device-agnostic, responsive design ampersand using the 
apama | with CSS transforms used to enhance user interactions” srs pa tama 0 
of the site | James Braithwaite, creative director, Substrakt 


Technique 
Quick CSS3 fade 
effects 


Fade effects on the hover state are very 
popular and the use of CSS transitions 
removes the need for any user coding. In 
the following example a <div> tag 
contains a background image with styled 
text overlaying it. The initial state uses a 
high opacity to give the merest hint of 
the image. The hover effect, applied to 
the <header> tag, uses a low opacity to 
view the image when the cursor rolls 
over the associated text. 


.fade { 
opacity: 0.95; 
é transition: opacity 1s 
ease-in-out; 
004 -moz-transition: opacity 
1s ease-in-out; 

@@5 -webkit-transition: 

A creative digital G design studio opacity 1s ease-in-out; 

E i anp raie n AAA 006 background: #333; } 


Create container 02 Fade class 
Create a <div> tag to contain the 
background image and set height and 
width to match the latter. Now add the 
background image in the tag 
background-image: url(escape jpg); 


As Hover effect 


== Now to create the fade class that  “S 
determines colour, length of transition 
and starting opacity. The opacity ranges 
from O4, set to 9 to start with a dark 
background. Adjust speed of fade (eg 15). 


Set the fade hover opacity to O or 
01 to ensure the background image gets 
seen. Use the <h2> tag to add text and 
add the fade class to the tag (see the 
disc for the full code). 
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© SUBSTRAKT 


WORK ABOUT JOURNAL 


PLATFORM, menu 


— — PLATFORM 


>EATFORM 


WE ARE SUBSTRAKT 


a“ 


creative digital 


ve passion and experience; 
helping you get the best from considered design and intelligent digital media. 


Inspiration @ sussTRAKT 
Inspirational and po ee 
imaginative 


Image sliders are a popular addition to 
sites. The Substrakt slider stands out RIBA Walking 
from the crowd due to a little imagination Architecture 
and a great combination of images and 
fonts. The slide is a layered affair that 
uses blurred background images to 
create the canvas and adds layers to 
create a sumptuous and engaging 
experience. Simple animations bring the 
text and in-focus image onto the canvas 
when the directional arrows are clicked. 


and w 


_foe «ais 


Technique 
Add custom 
underlines to links 


An underline is often added to text links to 
emphasise the current link. The Substrakt 
site takes the basic concept and adds a 
hover effect. The hover effect changes the 
text colour and adds a styled underline. 


<nav> 

<a href=“#" >WORK</a> 
<a href=“#">ABOUT</a> 
<a href=“#">JOURNAL</a> 
<a href=“#" >CONTACT</a> 
</nav> 


ó The <nav> tag 

= To create the navigation base, the 
semantic <nav> tag is going to be used 
rather than an unordered list. The first step 
is to add a set of <nav> tags in the body 
and then include the links that are to 
occupy the menu. 


nav a { 

padding: 10px @px 2@px @px; 
margin: px 30px @px @px; 
text-decoration: none; 
color: #999; 

font: 800 14px Open Sans; } 


Style link 

By default links will sit horizontally, so 
the first step is to add a right margin to add 
space. To create the space between the link 
and underline, bottom padding needs to be 
added. To finish, style the text and set 
text-decoration to none to remove underline. 


JOURNAL 


«@ Add underline 

“= The final step is to add the underline 
on hover. This is achieved by adding a 
bottom border, nav a:hover {border-bottom: 
#000 solid 3px;}. A designer has the option 
to modify all the settings - eg colour, width, 
style - to suit. 
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Props to 


Makeasliderwith @ 


Codrops 
This slider type is 
based on the 
excellent, simple 
multi-item slider 
from Codrops. 
Check out bit.ly/ 
UgVRTj for the 
full code. 


Slider one 

Slider one uses a 
‘scrubber’, reminiscent 
of the interfaces 
commonly used for 
online video and allows 
users to move quickly 
or slowly to any point 
along the timeline. 


Slider two 


Pome 307.941.1797 


eras milampahna lohong som 


hover effects 


inspiration www.neopolitanclothing.com 


ou will see sliders being 
utilised absolutely 
everywhere online, because 
they are a really great way 
to display engaging content 
and consequently draw 
people into a website. There 
is a huge choice of free and 
premium slider plugins, however, these will 
invariably not give you the degree of control that 
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you need and that a custom slider will give you. 
You will also find that an off-the-shelf slider will 
normally cost you a larger code ‘overhead’ than a 
custom slider which only includes the features that 
you need. 

Understanding the building blocks of a slider will 
ultimately help you to identify where similar coding 
techniques may be useful in other situations. This 
workshop will show you how you can make a slider 
by using hover effects. 


Slider two uses radio 
buttons and navigation 
arrows that feature in 
many sliders, and 
introduces an 
animation delay 
between each element 
within the slider. 


Footer 
The footer area cleverly 
suggests the continuity 
that an infinitely 

g slider 
provides by mimicking 
the patchwork effect in 
panoramic montages 
before Photoshop. 


INSPIRATION 
Sell me something 


Sliders can be great for selling products or 
services. Marketers know if we engage with 
something, we're often halfway towards 
making a purchase. This is why many 
online stores use sliders for displaying 
products. It re-creates the real-world 
experience of browsing clothes rails or 
shelves. Neopolitan Clothing (www. 
neopolitanclothing.com) invites customers 
to explore its product range and 
production process with two sliders. Its 
unique look, delivered by its custom sliders 
and underlying naivety, means it doesn't 
look like a retail giant so you can 
experience the brand's own personality. 


The other side of sliders 

“Many usability experts, including the legendary Jakob Nielsen, have 
concluded that the ubiquity of sliders has led to ‘banner blindness, which is 
rather interesting. Nielsen's team ran a usability study in which users were 


<comment | given the task of identifying special offers promoted, and it produced some 


apat | fascinating observations’ 


of the site Jayson Winters 


TE 
or Scripts in place 


The CD provides workshop files that include the 


JavaScript used by the slider. You'll need to ensure your 


HTML file includes the correct paths to these files for 
the slider. This workshop will focus on how CSS and 
HTML is used to create and customise the slider 
functionality. Check the provided files for the complete 
code as only the highlights are covered below. 


göl x5-files.tif 


Hover effects 

The first noteworthy code in the style.css 
executes an image replacement (a vertical shift) when 
the user hovers over the image. Examine one of the 
JPEGs and you will see that a variation of the image 
appears below the original and this code is simply 
swapping in this variation. The opacity of the image is 
also reduced to 70% using CSS. 


a.cssmouseover { 
display:block; 

width: 200px; 

height:250px; 
background-position:@px px; 


TECHNIQUE 
Be subtle 


Hover effects can be a great way of providing visual 
feedback and help to provide a great user experience, 
but don't go and spoil that by throwing in every hover 
effect you can lay your hands on. 


USE WHAT 
YOU HAVE 


ngela Duncan 


INIQUE Work up the slider 


a.cssmouseover:hover { 
background-position:@px -255px; 
opacity: 0.7; 

3 


Slider styling 


Style the unordered list to display the slider 
content. Note the pseudo classes that provide the V 
shaped slide page ‘pointer’. The following section 
‘hollows out’ the V shape using a white block. 


gi .mi-slider nav a.mi- 
selected: after { 
border-color: transparent; 
border-top-color: #fff; 
border-width: 20px; 
left: 50%; 
margin-left: -2@px; 
} 


Scale up 

Several elements to the animation include ‘easing 
in’ and ‘easing out’ to provide more realistic acceleration 
and deceleration effects. Content is scaled up from 0% 
to 100% size when first loaded. Timings are set for the 
length of each animation and the gap between moving 
the elements from left to right and vice versa. This is the 
scale up code (without vendor prefixes): 


@keyframes scaleUp { 

@% { transform: translateX(@) 
scale(@); } 
@@3 100% { transform: 
scale(1); } 


a } 
Lost in translation 


Content is translated off page; @keyframes 
created to set start/end points. A slider item can move 
from right, from left, to right, to left. Vendor prefixes are 
required so eight blocks of code in total. 


translateXx(@) 


@keyframes moveFromRight { 

0% { transform: translateX(1200%) ; 
3 
@@3 100% { transform: 
translateX(0); } 


004 } 


TECHNIQUE 
List lesson 


Favoured by designers everywhere for 
creating navigation menus, the unordered 
list <ul>) is pressed into action again here in 
order to provide a rather convenient 
method for listing the contents of the slider. 
This method is extremely effective. Who 
would have thought that the humble 
bulleted list would provide such an 
important service to the HTML world? 


Browser check 

Mordernizr is loaded first in order to 
provide JavaScript fallback for non- 
compatible browsers. This simplified version 
of the browser doesn't implement the 
compatibility benefits it can deliver so please 
refer to the more fully featured Codrops 
slider to see how Modernizr should be 
integrated with the slider. 


nk rel=“stylesheet” _ 
type=“text/css” href="css/ 7 
style.css” /> 

082 <script src=“js/ ; 
modernizr.custom.63321.js"></ 
script> 


Slider content 

Each page of the slider is a separate 
unordered list, and you'll find that each 
element of content is represented by one 
line of that list. The class that is created in 
the stylesheet (cssmouseover) provides the 
two hover effects that can be seen in use 
here - the image replacement and the 
opacity shift 


won EF] 

<li><ahref=“#"clas: 
smouseover” style=“background- — 
image: url(‘images/men-tshirt. 
jpg');"></a></1i> È 
B03 <li><a href=" | 
class="cssmouseover"style=“ba 
ckground-image: url(‘images/ 
ladies-tshirt. jpg');"></a></li> 


004 </ul> a 
03 Slider navigation 


The slider navigation is simply 
provided by a ‘nav’ class that is set up in the 
CSS. As was intended by the introduction of 
CSS and the separation of styling and 
content, these lists enable you to trigger 
some rather impressive results while still 
being able to easily change the content, 
which is good news. 
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Adafade effectsto “tran 


of Coimbra 


e 
O — | l tOO ti S This Portuguese university's award- 
winning tourist site uses image-based 


tooltips in order to provide visitors to the 


inspl ration visit.uc.pt/en site with pictures of the points of interest 


on their Tourist Circuit map. The clean, 


B = ooltips can be used to of content with which the user can engage. modern and effective interface 
provide a richer and As with any refinements you make to the user encourages users to virtually explore the 
deeper UX. At its interface, you want to make sure they do campus, and allows 360° rotation, 
simplest, the link Title actually add value to the user experience Hovering over the animated location 
attribute is used to add and that the results are compatible pins results in a pop-up image and a link 


information about the across a range of browsers and for more info. Developed by Coimbra- 


. 
nature of a link and will versions, You'll also want to ensure Easiest vs best based Burocratik (burocratik.com), 
appear by default as a your refinements don't interfere The workshop tooltip is whose lists of awards are nearly as 

standard browser tooltip. With a little jQuery, with the site functionality when based on CSS Globe’s impressive as their client list, you 
you can transform tooltips into an extra layer accessed on a different device. Easiest Tooltip and Image won't have to explore very far to find 


Preview Using jQuery more interesting projects. 
(http://bit.ly/RtCeYN). 


visit 


u ihe c + UNIVERSIDADE DE COIMBRA 


IRON GATE 


Points of Interest of 
the torit civeait A 


Universi 
of Coimijra 


Tourist (Vircuit 


Clean lines Annotations Explore at will Nomargins Alittle bounce 

The modern appearance is Hand-drawn annotations The layout leaves the visitor There is no margin around the The tooltips feature a fade in/ 
helped by avoiding the guide the user to the free to explore each of the picture that’s delineated from out combined with a small 
now- dated look of big, round navigation options. ‘All at Points of Interest in any the illustration. The notch that bounce. They providea 


corners and drop shadows, once’ for immediate access order and is a whole world points to the location pinis pleasing experience that 
It’s colourful and engaging or ‘discover as your explore’ away from a boring linear list part of the image mask sono makes you want to keep 
with a lightness of touch. for the more leisurely tourist. of things to see. extra elements are needed. hovering over each of them. 
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| Useit or lose it 


| “It's remarkable how often something learned in a workshop or tutorial can be 


| useful in some way or another on a live project. Just as encouraging a website 


o 


What our $ 
expertsthink | hands-on: 
ofthesite | Jayson Winters 


TECHNIQUE First the HTML and CSS 


o Set up your links 


The HTML for this particular tutorial is really 
simple. Set up a link to your |Query library, with either a 
local-server copy or loaded from a CDN. Remember 
that you will always want to use the minified version of 
the jQuery library in a production environment. This will 
save kilobytes (and potentially seconds) when your site 
is accessed. The next step is to link to your tooltip code 
and your stylesheet. 


@01 <title>Image Tooltip with jQuery</ 
title> 

002 <script src=“jquery-1.9.1.min. js"></ 
script> 

003 <script src=“imagetooltip. js” 
type=“text/javascript”></script> 

004 <link rel=“stylesheet” type=“text/ 
css” href=“screen.css"> 


Content and link 

The tooltip content is provided by several link 
attributes. First of all the class is set to the value 
Cimagetooltip”) that the script will be listening out for. 
The rel attribute is used here to specify the image that 
will appear as part of the tooltip and the title is set with 
the caption content. 


ði <p>We can <a href=“#" 
class=“imagetooltip” rel=“demo- 
image.png” title="Demo image with 
caption”>provide a link </a> to 
demonstrate an image tooltip with 
jQuery.</p> 


03 Style the page 

à In the stylesheet an ID is created for the tooltip. 
It's possible to style the tooltip extensively to create a 
particular look and match the needs of your project. 
Here things are kept simple with a dark-grey caption 
area to appear underneath the image area with white, 
centred text for the caption. 


#imagetooltip{ 
position:absolute; 
background: #333; 
padding:@ðpx @px 8px @ðpx; 

ni display:none; 


color:#fff; 


_| visitor to engage with the site content provides them with a more rewarding 
experience, you will get the most of out tutorials and workshops by getting 


007 text-align:center; 


008 } 
04 Finally the jQuery 


First the document-ready function is used to 
ensure the DOM is fully loaded before the remaining 
functions are executed. The .hover() function is then set 
to listen out for a mouse entering or leaving the link 
area. The title attribute is passed into a variable and set 
to to prevent the browser tooltip from showing based 
on the Title attribute. 


$(document) . ready(function(){ 
$(“a.imagetooltip”). 

hover (function(e){ 

+ this.t = this.title; 
this.title = “"; 


05 Building an appendage 


Another variable called caption has a <br/> added 
to it to force the caption to appear beneath the image. A 
paragraph is added to the body of the HTML built to 
display with the properties declared in the #imagetooltip 
ID selector and with the link attributes specified in the 
HTML. An <img> is built using the rel attribute as the 
image path. 


var caption = “<br/>” + this.t; 
$(“body”) .append("<p 
id=‘imagetooltip'><img src=’“+ this. 
rel +"' alt='image tooltip’ />"+ caption 
+"</p>"); 
003 $(“‘#timagetooltip”) 
004 .css(“top”,(e.pageY - 100) + “px”) 
.css(“left", (e.pageX + 50) + “px”) 


005 
006 . fadeIn(500); 


Image Tool 


We can provide a link tc} 


You can adjust the .fadeln and .fadeOut values to suit 


TECHNIQUE 
Taking it further 


If you have grander ambitions for your 
tooltips there are huge range of resources 
available that will add further improvements 
and refinements to them. You may like to 
take a look at several different published 
examples and choose the parts you like 
from more than one. 


feet = 
—— = = 
Selectable positioning 


Within the imagetootipjs file there 
are a few digits you can change. Eg the 
numbers after epageY and e,pageX can be 
adjusted to position the tooltip where you 
want relative to the link. 


‘This gots interesting as you decrease the height and width of a box, but 


mimi. i iin 


‘You can also pay withthe colors: 


Abd kbar a 


‘And more importantly you can assign different widths to each border: 


Imageless notch 

You might like to add a notch to your 
tooltip so that it shows which text or image 
it's related to. CSS border triangles are a 
popular way of achieving this without 
resorting to images. 


Se Pt 
cin Ca rope ore we a he ran eve tw 


03 Special effects 

Why stop with a simple fade-in or 
fade-out? You can experiment with other 
animated effects like little slides and 
bounces, or even spins if you must, to create 
more visual impact on-screen. 
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Implementa 
floating toolbar 


inspiration http://shop.fontyou.com/ 


f you seek innovative 
eCommerce production 
values, font vendors often 
show the way; this Parisian 
type factory is no exception 
to the rule. FONTYOU 
epitomises how shopping for 
custom fonts can be elegant 
and enjoyable. Dynamic touches extend 
to graceful content anchoring, section 


transition wipes, accordion-style custom 
drop-down lists and a floating navigation 
bar. Switching from footer to page top as 
you scroll, this persistent approach to 
delivering core site services is a recurring 
trend requiring just a few lines of code. 
Here we'll derive a similar technique for 
floating a <div> from the page footer to 
the header using CSS and the superb 
jQuery plug-in ScrollToFixed,js. 


TECHNOLOGY 
Editable regions 


The in-line font previews and editable text 
regions within the Fonts section really 
hinge on a now-simple tag attribute. “All the 
work is done directly by the browser using 
the contenteditable attribute,” the 
developer team confirms. By setting the 
contenteditable attribute as true, any text 
within the parent <div> can be altered 


ði <div spellcheck=“false” 
contenteditable=“true” class=“ 
font-sample clearfix black ” 
style=“font-size: 80px; font- 
family: ‘Achille FY’; font- 
style: normal; font-weight: 
400; top: 2px;”>You font 
my world</div> 


° . 
Floating links 
The site adopts persistent 
navigation with an elegant 
floating toolbar, powered 
by prewritten jQuery. 


Logo 

A small FONTYOU 
logo.png nside a 
container <div> and 
remains locked 
centrally at the page 
top as you scroll by 
using CSS fixed 
positioning, top Opx 
and offset left 50%. 


Typography 

The site makes great use 
of FONTYOU’s own Achille 
Black FY typeface within 
background images and 
indeed page text. What 
better way to demonstrate 
the typeface’s style and 
usability to potential 
FONTYOU customers? 
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Font test 

Live font preview areas 
instantly edit embedded 
typefaces by using HTML5’s 
now-standard attribute 
contenteditable. A jQuery UI 
plug-in provides the slider 
component for resi while 
a listener event modifies CSS 
properties on the fly. 


Toolbar 

This simple black 
navigation ribbon 
begins at the foot 
of the page, 
floating up to the 
page header and 
anchoring there 
until you scroll 


back up to the top. 


Colour 

Apart from standard black 
and white, FONTYOU’s 
limited colour palette is a 
reference to the foundry’s 
subtle brand values. A 
vivid red (#ff3333) provides 
a powerful background 
while selected text appears 
in grey (#bfbfbf). 


Download plug-in 

To start, download ScrollToFixedjs. 
Visit https://github.com/bigspotteddog/ 
ScrollToFixed and click the ZIP button to 
obtain the whole repository as a .zip 
archive. Unpack this and identify the 
jquery-scrolltofixedjs file. Start and save a 
new, basic HTML document and place 
the plug-in in your page's root directory 
and we'll add the <script> tags. 


 noeetnany /SoToead mee 


Just before the closing body tag of 
the page, you need to first link to the 
main jQuery library. You can either point 
to a local copy of the jquery-1.91)js library 
or the version hosted by the global 
jQuery CDN. It won't work otherwise and 
both methods are listed below: 


göl <script type=“text/ 
javascript” src=“http:// 
code. jquery. com/jquery- 
1.9.1.min. js”></script> 
002 <script type=“text/ 
javascript” src=“jquery- 
scrolltofixed. js”></script> 


</body> 
</html> 


03 Bar building 


Next add the basic page elements, 
notably the toolbar. Create a <div> with 


3) TECHNIQUE 
Setting z-index 


All page elements have a hierarchy regarding how they render. By 
default, overlapping elements stack relatively on top or below much 
like a layered image. The CSS z-index property dictates this order and 
ensures elements stack as desired. When elements become moveable 


an id of 'floatingbar' and then add a CSS 
style class within the page head. Here 
we'll set the height and width, make it's 
position absolute and place it at the foot 
of the page. 


g <div id=“floatingbar”></ 
div> 
css 
#floatingbar { 
background: #000; 
height: 57px; 
width: 100%; 
position: absolute; 
bottom: px; 
} 


04 LongPage 

It's also important to set up a 
dummy page via a body CSS class. Set 
the page margin to zero and make sure 
the height is long enough to check the 
scrolling effect. We've made our dummy 
page FONTYOU red and used a similar 
Google font coloured grey simply for 
illustration purposes. 


body { 

margin: 0; 

background: #ff3333; 

height: 3500px; 

font-family: Arbutus 
Slab’, serif; 

color: rgb(191,191,191); 

} 


05 Header logo 


Place a new <div> in the page 
body with the id ‘toplogo' and then inside 


it place an image link. We've used a 
dummy .png sized 84x84. Next, add a 
new CSS class #toplogo where you'll set 
the position but also bear in mind that 
the z-index must be set over 1,000 to 
stay above the toolbar. 


HTML 
= <div id=“toplogo”><a 
href=“#"> 
@@3 <img src=“logo.png”></ 
a></ div> 
css 
#toplogo 
i 
position: fixed; 


gin-left: -42px; /* 
offset */ 

z-index: 1001; 

} 


Call ScrolIToFixedO 


Finish up the whole process by 
adding the crucial code call below your 
opening <script> tags and right before 
the closing body tag. By passing in your 
toolbar <div> id you'll invoke the plug-in 
function and the element will float up 
from footer to header as you scroll, 
tucking under the logo. A really handy 
feature and looks great too. 


<script type=“text/ 
javascript”> 
$(‘#floatingbar’). 
scrollToFixed(); 
</script></body></html> 


<comment> 
What our 
experts think 
of the site 


designers often set absurdly high z-index values to force focus to the front. However this doesn't always work and 
can prove confusing, with a general rule of thumb often z-index integer increments of ten. 


#element2{ z-index: 80; } 
#element3{ z-index: 50; 


#element1{ z-index: 20; } /* element1 is bottom */ 


/* element 2 is top */ 


3 } /* element 3 is below 2, above 4 
#element4{ z-index: 30; } /* element4 is above 1, below 3 */ 


*/ 


Techtip 

ScrollToFixed.js 

Extra credit must go out to the author of 
this superb plug-in, listed on the GitHub 
repository as Joseph Cava-Lynch, aka 
bigspotteddog (https://github.com/ 
bigspotteddog). Inspired by a similar 
technique by Remy Sharp for ‘Fixed 
Floating Elements’ the supplied 
documentation includes some intuitive 
test demo pages. These allow 
developers of all levels to dive in, see 
how the plug-in is attached to your 
HTML and visually describe the various 
available effects. 


Techtip 

Instant jQuery 

Getting started with jQuery is so much 
easier than you may think. Designed to 
help implement great dynamic 
techniques, this amazing library does all 
of the tough stuff so you don't have to. 
What's more, it doesn't need to be 
installed server-side for you to get 
started with it on your desktop. 
Download the latest revision at http:// 
Jquery.com/download/ and place the js 
file in your site's root, link the <script> src 
in your page body and go! 


jquev jQuery 


Fonte ateial 
“We are a type foundry, we sell 
fonts and we are type lovers. 
Letters are our raw material. 
That's why we choose fonts to 
be at the heart of our FONTYOU 
| site design, with our simple 
brand design and graphic codes, 
along with a live type tester 
which embeds our own web 
fonts. So users can easily try and 


see fonts in small or big sizes.” 
Valentine Proust 
Chief creative officer, FONTYOU 
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Designa 


hexagonal 
menu with CSS3 


inspiration www.builtbybuffalo.com 


eep down we all want to 
be alittle different, 
stand out from the 
crowd. Brighton's 
boutique web agency 
Buffalo doe this, from the 
crazy ASCII art in their 
source code (do check 
this out) to their fresh, responsive and innovative 
interface design. The agency's website not only 
showcases their visual design aesthetic, it 
demonstrates an impressive command of 
contemporary web technology savvy. Their 


Experiments with Cascading Style Sheets 


“This menu concept is based 


elegantly minimal design is 
actually delivered using 
over 1,000 lines of 
Sass. This workshop 
couldn't attempt to 
work through the 
sophistication of 
Buffalo's interface, 
but it has provided 
our inspiration to try 
something a bit 
different over in the 
shape department. 


CSS 
pseudo- 
elements 


The :before and 
rafter pseudo- 
elements used 

in our hexagons 

are versatile, 
semantically 
clean code. 


off Stu Nicholls's work published here: 


<comment> 
What our 
experts think 
of the site 


www.cssplay.co.uk/menus/cssplay-hexagon.html. Thank you to 
Stu for his permission. The technique is compatible with IE9+, 
Firefox, Opera, Chrome and Safari. Experimental CSS3 can be 
addictive. If you are worried about your own CSS3 use or that of a 
friend, seek help from a qualified professional.” 


| 
| 
Jayson Winters 
| 
| 


Colour scheme 
The site makes striking 
use of colour with its 


contemporary 
selection of just the 
right shades of red and 
blue. The neutral greys 
where help avoid 
powering the eye. 


Lazy loading 

Try reducing the height 
of your browser and 
you'll see that the 

hex: 

loaded’ and wa 

the user scrolls down 
the page to make their 
entrance. Subtle touches 
like this really improve 
the user experience. 


Make it fit 

Reduce the width of 

your browser or access 
the site on a smaller 
device and the hexagons 
have to go, replaced first 
by two columns of 
rectangles and, as the 
width decreases further, 
down to one column. 


INSPIRATION 
The joy of six 
From the Giant's Causeway to honeycombs, 
hexagons are prevalent in nature due to their 


efficiency. Regular tiling is only possible with three 
shapes: the triangle, square and hexagon. We see 


examples of interface design based around SS 
a a 


squares in many places. Triangles are a bit more 


| 
| 


problematic because their shape doesn't lend me n 

itself to providing much space for text or an image. =e ———_ 
kae 

However, the hexagon cries out to be used in A a a n 


interesting ways in our designs. We just need to 
think outside of the box, use a little experimental 
CSS3 and some surprisingly simple HTML to 
achieve our own hexagonal menu. 


128 Web Design Tips, Tricks, & Fixes 


avitt By 


JOBS CONTACT 


ASCII art 

This finely crafted ASCII 
art buffalo appears in 
the source code at 
builtbybuffalo.com. 
ASCII art dates back to 
1966 and was born 
because early printers 
often lacked any 
graphical capabilities. 


Top menu 

The minimal use of text 
encourages exploration 
and users are rewarded 
with tooltips that reveal 
what lies behind each 
hexagon. The top menu 
provides a useful backup 
navigation and serves to 
frame the page and the 
agency logo. 


Ol The building blocks 
This code creates a basic rectangle and then uses 
pseudo-elements to add a triangle before and after the 
rectangle to complete the hexagon shape. You can scale 
the size of the menu to suit your own needs by 
proportionately adjusting the 104px and 60px sizes (and 
a couple of other adjustments you are sure to find). 


@01 ul.hex {padding:®; margin: 300@px 
auto; list-style:none; width: 104px; 
height: 60px; position:relative; } 

@02 ul.hex li a {display:block; 

width: 104px; height: 6@px; 

position: absolute; left:0; top:0; 
z-index:100; text-align:center; text- 
decoration:none; font:normal 18px/60px 


“Arial”; color:#ddd; 
003 } 
004 ul.hex li a:before {display:block; 
content:“”; width:104px; height: 60px; 
position:absolute; left:0; top:0; 
z-index:-1; 
005 -webkit-transform: rotate(6deg) ; 
006 -moz-transform: rotate (6deg) ; 
ms-transform: rotate(6deg) ; 
| o-transform: rotate(6deg) ; 

j transform: rotate(6@deg) ; 
J 
@11 ul.hex li a:after {display:block; 
content:“”; width:104px; height:60px; 
position:absolute; left:0; top:0; 
z-index:-1; 


e AM 


@12 -webkit-transform: rotate(-60deg) ; 
013 -moz-transform: rotate(-60deg) ; 
014 -ms-transform: rotate(-60deg) ; 

015 -o-transform: rotate (-60deg) ; 

016 transform: rotate(-60deg) ; 

017 } 


» Firstand not first 

This code sets the non-hover and hover 
colours for the first hexagon and, in the language of 
the technique, ‘not the first hexagons. This allows for 
the central hexagon to be styled differently from the 
surrounding hexagons. The hover text colours are 
also set here. 


@01 ul.hex li:nth-child(1) a, 

002 ul.hex li:nth-child(1) a:before, 
@03 ul.hex li:nth-child(1) a:after 
{background: #ee6557; 

004 } 

@05 ul.hex li:nth-child(1) a:hover, 
006 ul.hex li:nth-child(1) 
a:hover:before, 

007 ul.hex li:nth-child(1) 
a:hover:after {background- 
color:#edaba5; color: #000; 


008 } 


009 ul.hex li:not(:first-child) a, 
010 ul. hex li:not(:first-child) 
a:before, 
ful. hex li:not(:first-child) 
:after {background-color : #16a6b6; 
12 } 

ul. hex li:not(:first-child) 
a:hover, 
014 ul.hex li:not(:first-child) 
a:hover:before, 
O15 ul.hex li:not(:first-child) 
a:hover:after {background- 
color:#86b2b7; color: #000; 


016 } 
E Right first 


D For economy of coding, the hexagon on the 
right-hand side is rendered first, followed by the 
central hexagon. 


ðt ul.hex li {width:104px; 
height:6@px; position: absolute; 
left:106px; top:0; 

002 -webkit-transform-origin: -54px 
30px; 

003 -moz-transform-origin: -54px 30px; 
004 -ms-transform-origin: -54px 30px; 
005 -o-transform-origin: -54px 30px; 
006 transform-origin: -54px 3@px; 
007 } 

008 ul.hex li:nth-child(1) {left:0;} 
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Buildan 


Interactive 


image caption 
using C353 


CSS is now a fully-featured interactive 
tool that can add visual panache to 
your pages without the need for 


writing JavaScript 


Create your HTML 

Werre using a basic HTML5 document with a 
simple unordered list as the method to deliver our 
image gallery. We'll show one image at a time, and 
animate through the list of images so that over time a 
different image will appear. The code for this step can be 
found on the resource disc. 


Add astylesheet 


Werre going to leave the HTML alone throughout, 


with all our changes happening in a stylesheet. Let's 
create that now by saving a new plain text document 
into the styles folder as ‘screen.css’ Create a link to it 
from the HTML document with the code shown below. 


001 <link rel=“stylesheet” type=“text/css” 
href=“styles/screen.css” /> 


03 Basic properties 

We'll start by giving our article some basic styling 
to create a general look and feel of a photo gallery. Add 
the CSS rules below to your stylesheet document to set 
this up, and preview in your browser. We'll be making 
iterative changes throughout, so you'll need your 
browser on hand a lot to test during this tutorial. 


body { 

margin: ð; 

padding: 0; 

background: #333; 

font-family: helvetica, arial, sans- 
serif; 
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+ HTML and CSS 
tools |tech|trends HTML editor, CSS editor (we used Dreamweaver for Wes 
both, but any will do) 


color: #fff; 
font-size: 62.5%; 
2 

#container { 
position: relative; 
width: 800px; 
margin: auto; 
overflow: hidden; 


} 


#container hl { 

font-weight: normal; 

font-size: 4em; 

text-align: center; 
text-transform: uppercase; 
text-shadow: 2px 2px @px #000; 

23 


#container ul#photogallery { 


margin: ð; 
padding: 0; 
height: 530px; 
width: 30000px; 
overflow: hidden; 


a 


#container ul#photogallery li { 
margin: ð; 

padding: @; 

list-style: none; 

position: relative; 


ot long ago, the web was 
a very static place to 
develop and deliver 
page designs. If you 
needed interactive 
elements to provide user 
feedback or aesthetic 
niceties, your options 
were limited to script, or a 
plug-in such as Flash. 

With the advent of CSS3 there's a lot you can do 
without the need for any script at all. Take the humble 
image caption. for example. It provides useful 
information about the subject, but isn't always 
required. Perhaps you have a photo gallery where 
you want to showcase the images, but also provide 
additional information if the visitor is interested, By 
creating captions that only appear with mouse-overs, 
you can still showcase the photography. 

The old way of doing this would have involved 
JavaScript, but here we'll show you how to use just 
CSS3. Not only will they appear when the mouse 
moves over the image, but we'll also use a number of 
CSS3 effects to make the caption transition into view, 
adding a nice bit of polish to the user interaction. 


E width: 
} 


Add a border 

To make our gallery of images feel a little bit 
more complete, we'll add a border to our images and a 
drop-shadow. This is entirely optional, and depending 
upon your own page design just do what works for you. 


760px; 


body { 

margin: e; 

padding: 0; 

background: #333; 

font-family: helvetica, arial, sans-serif; 
color: #fff; 

font-size: 62.5%; 


3 

#container { 
position: relative; 
width: 800px; 
margin: auto; 
overflow: hidden; 

} 


#container h1 { 

font-weight: normal; 

font-size: 4em; 

text-align: center; 
text-transform: uppercase; 
text-shadow: 2px 2px @px #000; 

3 


Caption One 


CSS3 INTERACTIVE CAPTION 


CSS3 INTERACTIVE CAPTIONS 


CSS3 INTERACTIVE CAPTIONS 


from top! 
“The LEHTMA marfup consists of a single <ul> with list items, Each am contara ai Tege anda caption 


= We've introduce asimple bit of styling to add a border, drop shadow and arrange the images horizontally 


*Afterten seconds, the images animate so that the current one slides off the page, and the next one slides into view 


Pour Cention is set to display at the top-left of the image by default, but we're about to hide it until the mouse moves over the image 


Q01 #container ul#photogallery 
902 ¢ 

003 margin: 0; 

004 padding: ©; 

005 height: 530px; 


006 width: 30000px; 
07 overflow: hidden; 
008 } 


Q01 #container ul#photogallery li { 
02 margin: 0; 

003 padding: ©; 

04 list-style: none; 

005 position: relative; 

006 width: 760px; 

007 border: 10px solid #fff; 
008 box-shadow: @px @px 10px #000; 


009 } 
05 Float them left 


We're using an overflow:hidden container in 
order to hide everything apart from the first image 
inside the stack, but we'll also use a little bit of script 
simply to animate the position of the stack so that we 
can see the images changing over time. As the images 
will be sliding from right to left, we will need to arrange 
our images horizontally. 


BOT body { 

002 margin: 0; 

003 padding: 0; 

@04 background: #333; 

005 font-family: helvetica, arial, sans- 
serif; 

06 color: #fff; 

07 font-size: 62.5%; 

008 } 


@@1 #container { 
@02 position: relative; 
003 width: 800px; 


04 margin: auto; 
Q05 overflow: hidden; 
006 3 


001 #container h1 { 

002 font-weight: normal; 

003 font-size: 4em; 

004 text-align: center; 

005 text-transform: uppercase; 
006 text-shadow: 2px 2px @px #000; 


007 >} 


001 #container ul#photogallery 


002 q 


Fes ea 


003 margin: 0; 

004 padding: ð; 

005 height: 530px; 

006 width: 30000px; 

007 overflow: hidden; 


008 } 


01 #container ul#photogallery li { 
@02 float: left; 

003 margin: ð; 

004 padding: 9; 

005 list-style: none; 

Q06 position: relative; 

007 width: 760px; 

008 margin-right: 40px; 

009 border: 10px solid #fff; 
@10 box-shadow: @px Opx 1ðpx #000; 
Q11 margin-bottom: 20px; 


012 } 
06 Add jQuery 


Although we're not using any script to create the 
captions and their animation, we do need to use a little 
bit to create the automatically animating image gallery. 
We'll use the jQuery library for this, as it makes it very 
simple to put in place. Grab the library from Jquery.com 
and add it to your page. 


001 <script src=“scripts/jquery.js”></ 
script> 

02 <script src=“scripts/captions. js”></ 
script> 


Create a sliding script 

With jQuery ready and waiting, add another 
script to your page and add the code shown to create 
the sliding effect. This works simply by waiting for ten 
seconds, and then sliding the entire <ul> element to the 
left the right amount to bring the second image into 
view. Once it's visible, we'll remove the first image, place 
it at the end of the stack and reset the margins. 


BOL $ (document) .ready(function(){ 
@02 slidewidth = $(“ul#photogallery 
li:first”).width(); 

003 s = setInterval(function(){ 

004 = $(“ul#photogallery”).stop(). 
animate({marginLeft:@-slidewidth- 
40}, 1000, function(){ 

005 $(“ul#photogallery li:last”). 
after($(“ul#photogallery li:first”)); 
006 $(this).css({marginLeft:0}); 
007») 

008 

009 }, 10000); 

010 3); 


o8 Test and review 
i Werre ready to test our page, so fire up your web 
browser and open the page. You should see a single 
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CSS3 INTERACTIVE CAPTIONS 


<Above> 
+ Our first transition is a simple fade-in that brings the caption 
into view with a nice opacity fade, It's basic but effective 


CSS3 INTERACTIVE CAPTIONS 


<Above> 
+ More complex transitions are also possible, such as this 
scale transition that we've created using the transform: 

scaleO property 


image with caption, ready for our CSS transitions. After 
ten seconds, the image should slide out to the left, and 
be replaced with the next one in the stack. 


01 #container ul#photogallery li span. 
caption 


002 { 
003 position: absolute; 
04 top: 0; 
005 left: ð; 
06 height: auto; 
@07 display: block; 
08 width: 740px; 
@@9 padding: 10px; 
@10 background: rgba(0,0,0,0.7); 
@11 } 
Hide the captions 


We need to hide our captions until the mouse 
moves over them. We'll use a standard set of styles for 
the captions, and then apply a second class that 
determines the animation type that will be applied to the 
caption, ensuring that the right animation fires for each 
Add the code shown to create the basic caption rules. 


Q@1 #container ul#photogallery li span. 
caption { 


@@2 position: absolute; 
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CSS3 INTERACTIVE CAPTIONS 


<Above> 
+ Next, we've created a slide transition that brings the caption 
into view, using nothing more than some simple CSS 


CSS3 INTERACTIVE CAPTIONS 


<Above> 
+ Our final page features several different transitions thatcan 
be applied to individual photo captions with nothing more 

complex than a class name 


003 top: ð; 
004 left: ð; 


005 height: auto; 
006 display: block; 
Q@7 width: 740px; 
@@8 padding: 10px; 


009 background: 
oro } 


rgba(0,0,0,0.7); 


Transition properties 

In order to make the captions animate into view 
rather than simply appear, we need to apply the CSS 
transition property. This is gathering more mature 
support in common browsers, but we still need to apply 
vendor prefixes to be certain that we've picked up on all 
browser variants. 


OOl -webkit-transition: all 300ms ease- 
out; 

@02 -moz-transition: all 300ms ease-out; 
@03 -o-transition: all 300ms ease-out; 
04 -ms-transition: all 30@ms ease-out; 
05 transition: all 300ms ease-out; 


Create a basic fade 

The most basic reveal will be a simple fade into 
view. To create this, we'll need to add two new rules to 
our stylesheet. The first sets up the initial size, position 


CSS and 3D 
limitations 


Some browsers don 
yet support CSS 3D 
transitions, so keep in 
mind that these effects 
may be limited to 
up-to-date users 


and opacity of the caption. The second provides the 
final state, and is set to use the pseudo :hover class. 


@@1 #container ul#photogallery li span. fade-in 
{ 

002 display: block; 

003 opacity: 0; 

004 } 


O1 #container ul#photogallery li:hover span. 


fade- in { 
02 opacity: 1; 
003 } 

Test again! 


Now that we've got our first style in place, it's 
time to test again to make sure the transition is working 
and the caption is fading into view successfully. Reload 
your page in the browser, and try moving your mouse 
over the image. Remember that this rule will only apply 


to the photo with the fade-in class attached 


B Sliding in 
The next style of reveal we'll create will slide the 
caption into view. This is a really versatile effect that can 
be used in lots of different ways. For our version we'll 
simply slide it down into view from the top of the image, 
but you could play with different starting positions to 
suit. Add the code shown to set up the final state. 


01 #container ul#photogallery li:hover span. 
slide- up { 

@0@2 -moz-transform: translateY(@px); 

003 -o-transform: translateY(@px) ; 

@04 -webkit-transform: translateY(@px) ; 

005 transform: translateY(@px) ; 

006 } 


Astarting point 

As with the fade-in transition, we'll also need to 
create a starting position to animate from. Add the code 
shown to create this starting position, and then test in 
your browser again to make sure that this second 
transition is working as intended. Adjust the start and 
end positions to suit! 


@01 #container ul#photogallery li span.slide-up 


{ 
002 display: block; 

-moz-transform: translateY(-20@px) ; 
| -o-transform: translateY(-200px) ; 
005 -webkit-transform: translateY(-20@px) ; 
006 transform: translateY(-2px) ; 


007 } 
5 A simple option 


We've now got two nice transitions that work 
well, but there's a lot more we can do! Let's create an 
even simpler transition than the fade-in option. Add the 
code below to create the final position and properties 
for our simple caption option, Again, this will only apply 
to captions with the class of simple added. 


001 #container ul#photogallery li:hover span. 
simple 


002 ¢ 


width: 740px; 
height: auto; 
auto; 


e overflow: 
3 


16 Starting rule and tests 

By this point you're probably starting to get the 
idea that we need to create a starting set of properties 
to counter the final properties. Add the code shown and 
then test again to ensure everything is working as it 
should do. You've now got a total of three different 
transition effects! 


#container ul#photogallery li span.simple 
2 { 


display: block; 
width: 100px; 
height: 20px; 
overflow: hidden; 
} 


w Golarge 
We need to repeat this simple two-step process 


for each transition we'd like to introduce. Let's add a 
full-size caption option that covers the entire photo. You 
can choose how to bring this into view, but we've opted 
for a basic slide similar to the slide transition we created 
earlier. Add the code shown to set this up. 


#container ul#photogallery li span.full { 


display: block; 

width: 740px; 

height: 480px; 
J5 opacity: ð; 

10 5 -moz-transform: translate (-5@0px) ; 
-o-transform: translateY (-50@px) ; 
-webkit-transform: translateY (-500px) ; 
transform: translate (-500px) ; 


} 


01 #container ul#photogallery li:hover span. 
full { 


002 ~moz-transform: translatey (0px) ; 

j -o-transform: translateY(@px) ; 

-webkit-transform:, translateY (@px) ; 
005 transform: translateY (@px) ; 


006 Opacity: SH 
007 + 


@@ Scale into view 

As well as simple offset and fades, CSS3 
transform properties allow us to set the scale and 
rotation of elements on the page. We can use this to 
create a scaling effect for our captions. Let's set that up 
by adding a zoom-up transition. We'll start by creating 
the initial state for the caption. Add the code shown. 


001 #container ul#photogallery li span.scale { 


display: block; 
width: 760px; 
height: 500px; 
opacity: a; 
-moz-transform: scale(@.1); 
-o-transform: scale(@.1); 
-webkit-transform: scale(@.1); ` 
transform: scale(@.1); 
3 

The final state 


Next, we need to create the final state. You'll 
notice that we've used the transform: scale() property to 
set the initial state to a low percentage, and the same 
property to create the final full size version. The effect 
this produces is a zoom-up. Test to ensure it's working, 
keeping in mind cross-browser support isn’t as good for 
transform as other CSS properties. 


001 #container ul#photogallery li:hover span, 
scale { 


-moz-transform: scale(1); 
= -o-transform: scale(1); 
004 -webkit-transform: scale(1); 
005 transform: scale(1); 

opacity: 1; 

7 } 
Rotate in 3D 


2 If your visitor is using a modern browser such as 
Safari or Chrome, we can use the same transform 
property to rotate our caption into view in 3D space! 
This effect uses the same basic principles as the other 
transitions we've created to this point, but it won't work 
at all in older browsers. 


a Rotated captions 

We're setting up our caption to be behind the 
image, so that when the image rotates around the 
caption is revealed. To do this we'll need to ensure our 
caption sits behind the image, rotated about its Y axis to 
face away from the screen until it becomes visible. 


Understanding CSS3D 
transformations 


The CSS3 specification has been adapted over time 
to include some nifty 3D transformation options. 
These have been widely adopted by Apple onits 
iOS platform, leading to a wide userbase of 
compatible devices and browsers. 
The basic principle is that elements can existina 
ido 3D environment, being rotated or 
positioned in 3D space using the transform 
property, Not all browsers support this yet though, 
so you need to be careful to avoid using 3D effects 
for anything that relies on the effect to 
communicate essential information 

You can see some excellent tech demos of CSS 
3D transformations at the websites below, or check 
out some of our past issues which have featured 


tutorials on getting started with CSS3D effects. 


David DeSandro 
24ways.org/2010/intro-to-css-3d-transforms 
First-personshooter 

www. keithclark.co,uk/labs/3dcss/demo 

VR 
developer.apple.com/safaridemos/vr.php 
Safari showcase 
developer.apple.com/safaridemos/showcase/ 


transitions 


et inspired 
A lot of the effects we've 
created with CSS in this 
tutorial can be seen on the 
web already. It’s worth 
keeping up to date with 
websites like www. 
webdesignermag.co.uk 


Rotate the item 

Finally, to bring it into view, we need to rotate the 
entire item so the image disappears and the caption 
appears. This works because of the code we added in 
the previous step. Test to make sure it works, and tweak 
the effect to suit your own page design and preferences. 
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BAS 


Develop dynamic Qrsrmanor ., 


UK-born Luke Beard doesn't seem to stay 


still for long. Now based in San Francisco, 
O O O S the 25-year-old designer is a creative force 
to be reckoned with. It's a little like the 


internet was invented with someone like him 
Splla ie iio n http: //\kbrd tumblr. com in mind. Among other places, you can catch 


up with him at Zerply (where he works as an 


f it were necessary to choose a else. In this workshop you'll learn how to create advisor) on Twitter and, of course, Tumblr. It 
single word to characterise the the basics of your own customised photo blog. was Luke's Tumbir blog that provided the 
person behind the inspiration for By using a little PHP and some interesting inspiration for this workshop. Looking into 


this workshop, ‘dynamic’ would browser filters, once your page is built you 
do nicely. Being dynamic works won't need to edit it again. Just upload 
best when effort has gone into your images to a folder and voilà! 


Luke's world you'll see a constant search for 
the new and interesting. In an interview last 
year with oneminutewith.com he 


creating something you can be Your photos will be added to your Your own space advocated learning some core skills, 
proud of and acts as a platform blog automatically, along with The only thing better than consuming a lot of inspiration and 
for your creativity and something matching backgrounds. How capturing a moment or idea warned against jumping on trends. 


dynamic is that? is sharing it. Take the time Wise words. 
to create your own space 
and discover the rewards. 


to set you apart from everyone 


—T Browser time 
LEU RKR È BEARD You will want to test 
how your end result 
works on different 
browsers. Many of the 
techniques require the 
dreaded vendor 
prefixes in order to 
work inside their 
respective browse! 


JBGE theory 

The blog is a fine 
example of the 
frequently 
misunderstood ‘Just 
Barely Good Enough’ 
(JBGE) theory. In 
development terms, 
IBGE is the most 
effective solution to the 
project. It shuns 
over-engineered 
solutions that provide 
ever-decreasing returns 
and helps you focus on 
when to just stop. You'll 
find a good introduction 
to the subject over at 
Agile Modeling (http:// 
bit.ly/g86MC). 


Ahome for imagery Let the photo do the talking Test it out 

This fresh but simple layout, created By avoiding unnecessary interface elements, this layout PHP is a server-side scripting language 
using a custom Tumblr theme, provides a lets the photos tell their own story. The backgrounds, so you will need to test uploaded 

stylish home for Luke’s photography. derived from the main photo help to break the versions of the file or create alocal server 
Tumbir provides a fantastic photographic boundaries of the main image area ina similar way that (eg using WAMP or MAMP) to run PHP. 
and design resource even if you're going those cool televisions generate a dynamic light border Make sure the path to your photos is 

to build your own photo blog. colour matched to the screen content. correct in either case. 
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What our 
experts think 


ofthesite | Jayson Winters 


TECHNIQUE 


White space and great photography 


“Instagram, Tumblr, Flickr and many more dubiously spelled image-based 
services, together with the ubiquity of digital camera phones, have 
revolutionised the accessibility and sheer entertainment value of photography. 
There is good reason to be grateful for what they have given us. Now, put that 
tired, overused photo filter treatment away and go and do your own thing.” 


Let the PHP take the strain 


Load the images 

This tutorial will jump around the code a little to 
explain the techniques in the most logical way. 
Remember your file name will need a .php extension 
and be located on a server running PHP. The PHP script 
will be used once to load the backgrounds (because 
filters are to be applied to the background images only) 
and again to load the main photographs. 


02 Background first 

Check the tutorial files on the disc for the first 
part of the script that examines the files within your 
photos folder and loads their names into an array. The 
second part of the script builds an unordered list with 
each of the background images loaded into their own 
list item. Use images that are 900px wide by 600px tall 
- you can experiment with tailoring the script to suit 
different-sized images later. 


echo ‘<ul>’; 
foreach($images as $image) { 
echo ‘<li 
style=“background-image: url(‘; 
echo 
$uploads[ ‘baseurl’].’/photos/’ .$image; 
echo ‘) ”></li>’; 


} 
echo ‘</ul>’; 
Now the main images 


The script is run again in another <div> located 
on top of the background <div> and you'll see that the 


Adding text 
Use PHP to name photographs from the filenames 
using the PGP explode( function. 


code in this step looks very similar to Step 2. However, 
in Step 2, the image path and name were assembled 
into a background image style for the list item. In this 
step an img src attribute is being assembled with each 
of the image paths and names. 


echo ‘<ul>’; 
foreach($images as $image) { 
echo ‘<li><img srce=”"’; 
echo 
$uploads[ ‘baseurl’].’/photos/’ .$image; 
echo ‘” alt=”” /></1li>’; 


} 


echo ‘</ul>’; 


04 Styling the content 

If the PHP is correctly loading the background 
and foreground images, the rest of the work is styling. 
Look for vendor prefixes in the tutorial files that have 
been removed from these steps for clarity, The ‘fixed’ 
setting in line 04 gives the parallax scrolling look, take it 
out for the background to scroll with the foreground 


ði ul { list-style-type:none; text- 
align:center; padding:®; margin: @ auto; 


} 

002 27 li { padding: 150px; 
min-height: 600px; 
background: no-repeat center 


center fixed; 
background-size: cover; 
34 3 


05 Position absolutely 

The key to making this technique work is to 
ensure the foreground sits exactly on top of the 
background so the <div> that uses #images id will be set 
with position: absolute; and then centred. 


#images { 
position: absolute; 
top: @px; 
left: 50%; 
5 margin-left: -600px; 
3 


AET 


TECHNIQUE 
CSS and SVG Filters 


We're going to make the background image 
greyscale and blur it to provide contrast with 
the foreground image. Some browsers have 
had easy-to-use CSS filters for several 
generations now and some still rely on 
external solutions (like SVG filters) to achieve 
the same job. 


The blur and the gray 
Firefox requires the most effort to 
deliver a solution and this case the best 
method is to create a separate file with a 
svg extension. The file is then referenced 


using filter url: in the background <div>. 


øði <svg version="1.1" 
xmlns=“http: //www.w3.org/2000/ 
svg"> 

002 <filter id=“blurandgray”> 
003 <feGaussianBlur 
stdDeviation="5" /> 

004 <feColorMatrixtype=“matrix” 
values=“@, 3333 @.3333 0.3333 

@ O 0.3333 0.3333 0.3333 0 0 
0.3333 0.3333 0.3333 00000 
1 Q"/> 

@05 </filter> 

006 </svg> 


Other browsers again 

“== Much simpler CSS filters are also 
added to the background <div> so other 
browsers are supported. Achieving 
consistent results are across each of the 
major browsers may be your goal but if 
that's not possible you should probably have 
a good idea of how your content will appear 
if a particular technique is not supported. 


#background { 
filter: gray; /* IE6-9 */ 
003 -webkit-filter:grayscale 
(100%) blur(3px) ; /* Chrome 04 
19+, Safari 6+, Safari 6+ iOS */ 
004 filter: url(forfirefox. 
svg#blurandgray); /* Firefox */ 


5 0} 
03 Finally the image 


To help lift the foreground image of 
the background a drop shadow can be 
applied to the img attribute. Experiment with 
this to suit your taste, images and the 
configuration of the applied image filters. 
Code for this step is on the disc. 
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Make aminimal 
photography site 


inspiration www.letstravelsomewhere.com 


usciously-styled 
photography-led site 
Let's Travel Somewhere 
allows users to 
contribute their own 
images. Unlike sites such 
as Flickr, however, LTS is 


locations. Photographers have to apply to be a 
contributor, and then their images are displayed 
on the site at fullscreen to show off the beautiful 
shots in all their glory. The design of the site, by 
Ines Gamler of purepleasuredesign.com, is a 


minimal affair that measures the user's 
screen in order to allow the images to 
aimed at showing fit optimally within the space 
different locations around the world, with the available. The site slides down to 
premise that we will never get the opportunity other Images when they are 


within our lifetime to visit all of these wonderful requested by the user 


A simple border 


The image is measured to 
fit the screen and the white 


border applied dynamically 
to fill the browser space 


Navigation 

The links are 
presented in the 
bottom of the design 


and kepttoa 
minimum. The up and 


Rollover 

name dropping 
The photographer is 
given credit in the 
centre of the screen, 
together with the 
location of the 
images. This isa 
rollover link that 
changes colour. 


Consistent 
framing 
The dynamic border 
is added so that there 
is always a consistent 
white space around 
the edge of the image 
being presented. This 
effectively outlines 
the fullscreen images. 


down arrows take the 
user through the latest 
photography that’s 
been added to the site. 
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Vanishing act 
The photo credit 
disappears when 
the user clicks to 
view the full range 
of images, and 
more information 
is given about the 
photographer and 
picture’s location. 


INSPIRATION 
Navigational bliss 


The navigation of Lets Travel Somewhere is 
a lovingly crafted gem. When first arriving 
on the site the user is presented with both 
the photography and the photographer 
straight away. The interface is kept down to 
just a few simple buttons - up and down - 
which navigate through the latest 
photography, drawing users straight into 
the content. Only later, when the user gets 
a little deeper into the site, is the full 
navigation provided in the form of a top 
bar. However, most of the location content 
is actually hidden away behind a giant drop 
menu that separates all of the photography 
into geographic regions. The real beauty of 
all this is that the complex navigation is 
kept out of site until the user needs it 


providing a cleaner user experience. 


Use the screen 
realestate 

The photograph is 
presented to take 
advantage of the 
browser window 
space on offer, 
completely filling 
the screen with 
stunning imagery. 


i Responsive design 


“Let's Travel Somewhere is a collaborative, responsive website aiming at 
high-quality travel photography. Since the photos are the core element of the 

3 | project, the design is focused on a minimal and flat approach, the use of 
<comment> | elegant typefaces, and a pleasing UX on mobile devices. Yet, it's supported by 


What our 
experts think 
of the site 


Ines Gamler, Pure Pleasure Design 


carefully crafted icons/badges and subtle interactions/animations.” 


TE CHNIQUE Hidden navigation panel 


Add the content 

We are going to create a full-width sliding panel 
that will drop when the mouse is over the menu. To do 
this we place two div tags on the page that will 
represent the panel to be slid in and out, and the menu 
itself, Add the code shown below to the body section of 
your HTML document. 


@01 <div id=“panel">Panel</div> 


802 <div id=“menu">Menu</div> 


02 Link and style 

Now move your cursor to the head section of the 
document and add the link to the jQuery library as 
shown. Immediately below this we add the style sheet 
information that will style up the panel. We make it the 
full width of the browser with a height of 400px. 


001 <script src=“http://code. jquery. 
com/jquery-latest.min. js"></script> 
002 <style type=“text/css”> 

003 #panel 


004 { 

005 background-color: #999; 
006 width: 100%; 

007 height: 400px; 

008 position: absolute; 

009 top: -400px; 

010 left: 0; 

on } 


03 Style up the menu 

We now add the CSS code to style up the menu 
and make the background white. This is so that when 
the panel drops in, which is grey, this will stand out as it 
is positioned above the grey drop panel. For brevity of 
code we haven't added any menu items. 


gT #menu { 

002 background-color: #fff; 
003 width: 100%; 

004 height: 60px; 

5 position: absolute; 

top: @; 


006 
007 left: 0; 
008 } 


Detecting the mouse 

Now we add the code shown below directly 
under the style code we added in the previous step. 
Here we detect the position of the mouse on the y axis 
for the body of the document. If the mouse is greater 
than 400px and the panel is on the screen, we take the 
panel out. 


@@1 var onScreen = false; 

002 $(document).ready(function() { 

003 $(“body”) .mousemove(function(event) { 
004 if (onScreen && event .pageY>400){ 
005 $(“#panel”).animate({‘top': ‘-400'}, 
‘easeOutSine'); 

@06 onScreen = false; 


05 Finishing the code 

` We now add the counter if statement that checks 
if the panel is not on the screen, and if the mouse is less 
than 60px (the height of the menu). If it is then we slide 
the menu out of the screen. Save this document now 
and test in the browser to see it in action. 

901 } 

else if (!onScreen && event. 

pageY<60){ 

002 $(“#panel”) .animate({‘top': ‘60'}, 
‘easeOutSine’); 

003 onScreen = true; 


Menu panel 

Using jQuery it’s easy for us to create a menu that 
drops in and out based on the position of the 
cursor. Here the menu panel drops in when the 
mouse is over the top 60 pixels of the document. 


_fies <i o 


TECHNIQUE 
Minimal icons 


Social network icons are great for spreading 
the love on your site, but sometimes these 
icons can clash with the overall aesthetic of 
your design. Let's Travel Somewhere uses 
minimal branding for its icons, allowing 
them to fit within the design of its site. 


Download an icon 
d To start off we need an existing social 
media icon badge, so search Google Images 
for a relevant badge. Download this and open 
it in Photoshop or a similar image editor. 


@@1 .productbox { 
002 float: left; 

003 height: 150px; 
bs 500px; 


background-color: #006699; 


o2 Copy the selection 

Select the Magic Wand tool and click 
on the core shape that defines the icon. In 
this example it is the ‘f' of the Facebook logo. 


Press Cmd/Ctrl+C to copy this selection and 
then go to File>New. 


.productbox : hover 


{ 
background-color: #9C3; 


} 


Paste the result 

Photoshop will automatically create a 
new document the height and width of the 
clipboard, so click OK and paste in the icon. 
Scale this to the appropriate size and then 
save it as a transparent PNG ready for use. 
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Create 
images from 
code using 
GD and PHP 


In this tutorial we take a look into 
creating and manipulating images 
purely using code, and creating 
thumbnails on the fly 


tools | tech | trends GD, PHP, Dreamweaver 


o Verify your setup 

It's worth checking your PHP configuration to 
ensure that you are able to modify images using the GD 
library. Create a new PHP document and add the 
following line only. Save it as ‘phpinfo.php’ and run it via 
a browser. Do a search on this page for GD to ensure 
everything is enabled in your GD setup. 


@01 <?php phpinfo(); ?> 


02 Setting a header 

Well be outputting just an image without any 
HTML surrounding it. This means we'll be able to call 
our PHP script from within an IMG tag and pass 
variables over to it, from a separate file. Create a new 
PHP document and add the following code, this tells 
PHP to only output a PNG image. 


<?php 
header(‘content-type: image/png’); 
?> 


03 Create a square 

” Now that we have our output set, we can create 
some basic shapes using code alone. The following line 
of code will set up an image that measures 256 x 
256px. Using the imagecreate function, the code will 
then attempt to render out a PNG file using the 
imagepng function. Running this code now will give you 
the broken image icon. 
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reating graphics purely from code is 
a practice that dates back to the 
dawn of gaming. Developers would 
be able to create basic geometric 
shapes with a few lines of code 
(anyone remember Battlezone?) 

Although this process has come a 
long way, the creation of geometries 
with code is still common practice in 
game creation and serves as a way of 
freeing up vast amounts of memory; we also see this 
technique port over to web development. 

GD library is a framework that once was separate 
from PHP, but since PHP 4.3 it comes bundled as part of 
most PHP setups. This tutorial will assume that you have 
a working GD framework in place, If you don't, see the 
set-up instructions on the PHP manual website at 
uk.php.net/manual/en/image.installation.php. 
Alternatively you can download the latest version of 
XAMPP which comes bundled with a working and 
up-to-date version of the GD image framework, 

It is important to think about the order in which you 
do things in a PHP script with GD elements, It is 
important that you remember to free up memory at the 
end of your script, if you have large numbers of users it 
can quickly overload your server if you don't. 


$image = imagecreate(256, 256); 
imagepng($image) ; 


04 Adding some colour 

In order for us to get any kind of usable output 
image from our PHP, we need to add some colour to 
our square. Adding the following line of code calls up 
the imagecolorallocate function, and assigns an RGB 
value to our square. The RGB value takes in each colour 
value as a numerical value. Render in your browser to 
see the results. 


$image = imagecreate(256, 256); 
imagecolorallocate($image, 255, 
255, ©); 
003 imagepng($image) ; 


05 Getting RGB values 

There are several free tools online that will be 
able to give you a set of RGB numerical colour values. 
Alternatively, you can get these numbers by using the 
colour picker tool in Photoshop and making a note of 
the R, G and B numbers in the dialogue box. 


01 <li> 

002 <a href=“<?php the_permalink(); 
?>" title=“<?php the_title_attribute(); 
>"> 


<?php the_title(); ?> 


a </a> 
</li> 


06 Using fonts 

The next logical step would be for us to add 
some text to this image. In order to do so we must add 
a font file to our server directory. Grab a TrueType font 
and upload it to the same directory as your PHP files. 
You can then call it using the following code. 


ðI $font = ‘Origin-Bold. ttf’; 


Assigning text colour 
* Before we can use our recently added font, we 
need to assign a colour to a variable, this will then allow 
us to assign the variable to the font element that we will 
add later on, Use the imagecolourallocate function as 
before, adding the following code, We can now make 
anything white by using $white. 


001 $white = imagecolorallocate($image, 255, 
255, 255); 


08 Adding astring 

We can now add our text to our image - we'll do 
this using the function imagettftext. This function takes 
in a total of eight variables. In order they are; the image 
we are modifying, the font size, font angle, text X 
position, text Y position, text colour, font file and the text 
string we are adding. 


$string = ‘Hello World!'; 


imagettftext($image, 25, ©, 12, 140, 
$white, $font, $string); 


09 Destroying an image 

The final and probably most important step 
when creating an image using the GD library is to 
destroy the resources at the end of the code. This will 
free up memory on your server, very important if you 
have a high number of users using your code. Add this 
single line before the closing PHP tags. 


OT imagedestroy($image) ; 


© 210° 
Os 7 % Oz 
OB: 60 % Ob: 


Ou 42 


10 Image resize script 

One of the most common uses for the GD 
library is creating thumbnails from images. Over the 
next few steps we'll use some of the previous 
techniques to create a PHP function to do that. Create a 
new PHP document and add the following. This will 
create our function and allow us to pass variables into it. 


<?php 


function createThumbnail($image, $width, 
$height) { 


} 
> 


nD Get image dimensions 

In order to resize our image into a thumbnail, we 
need to get the size of the original file. To do this we can 
use a GD function called getimagesize, combined with a 
PHP list function. The list function will assign the width 
and height to a new variable. Add the following code 
within your function. 
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> Computer > Local Disk (Ci) » xampp » htdocs » wd202 » thumbnails 


You may notice a lot of 
repeated IF statements; 
this is because functions 
need to be completed in 
a very specific order with 


the GD library. 


@01 list($originalWidth, 
$originalHeight) = getimagesize($image); 


EA Checking file types 


At this point, we need to know if the file being 
passed to our function is a JPG or PNG. We can 
establish this by evaluating the filename past the last ful 
stop. Note that GIFs are no longer supported by GD. 
Add this PHP search command within your function. 


e- $filetype = explode(‘.', $image); 
if (preg_match(‘/jpg|jpeg/', 
$filetype[1])){ 

003 $originallmage = 
imagecreatefromjpeg ($image) ; 


3 
m if (preg_match(‘/png/', $filetype[1])){ 
006 $originallmage = 
imagecreatefrompng($image) ; 


007 } 
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B Creating square thumbnails 

By adding the following code, we are able to 
create a perfectly square thumbnail 100 x 100px wide. 
This does mean that the original image will be 
squashed, rather than retaining its original proportions. 
Add the following code at the createThumbnail function 
- this will create a resampled version of our image, but 
will not output it yet. 


001 $image_tn = imagecreatetruecolor($width, 
$height); 

002 imagecopyresampled($image_tn, 
$originalImage, 

O, ©, @, ©, $width, $height, $originalWidth, 
$originalHeight); 


One more IF 

We need to add one more IF statement to our 
function in order to output our thumbnail. As before, 
this code will check the extension of the file and create 
a thumbnail in either a PNG or JPG format. The create 
image functions take in quality values - 1100 for JPG 
and 1-9 for PNG, these have been set to maximum. 


OOT if (preg_match(‘/jpglipeg/', $filetypeL1])) 
£ 
A imagejpeg($image_tn, null, 100); 

3 


004 if (preg_match(‘/png/’, $filetype[1])){ 


OO- tT. corer» ionom c + mrp > Moe > wil» 


906 3 
007 imagedestroy($image_tn) ; 


imagepng($image_tn, null, 9); 


Ea Outputting our thumbnail 

It's finally time to output our thumbnail. Adding 
this code outside of our function will check the input 
image's extension, set the correct header and then 
output a thumbnail 100 x 100px. Add a test image to 
your working folder and then run your script in a 
browser to see the results. 


@01 Sinput_file = ‘test. jpg’; 

002 $extension = explode(‘.', $input_file); 
003 if (preg match(‘/jpgljpeg/', 
$extension[1])){ 

604 header (‘Content-Type: image/jpg'); 


} 
= if (preg_match(‘/png/', $extension[1])){ 
007 header(‘Content-Type: image/png’); 

} 


010 createThumbnail($input_file, 100, 100); 


46 Proportioned thumbnails 

“== While we've been able to create a square 
thumbnail. if we're honest, it doesn't look all that great. 
What we really want is a thumbnail that is still in the 
same resolution as the original. We can achieve this by 


modifying our function slightly. First of all remove the 
$width and $height variables from the start of our 
function, the only variable we need to execute this 
command is our image. 


01 function createThumbnail($image) { 


Maximum values 

The next step we need to take is to adda 
maximum value for both height and width to our code, 
we'll then take the longest length of our image and 
scale our thumbnail so that it retains its resolution, The 
following code contains three IF statements. One is to 
deal with the height being the longest length, one is 
there to handle the width, and the third is for a square 
image (so the sides are equal). 


BOT $max_width = 200; 
002 smax_height = 200; 
if ($originalWidth > $originalHeight) { 
$width = $max_width; 
$height = $originalHeight*($max_ 
height/$originalWidth) ; 
} 
Q if ($originalWidth < $originalHeight) { 
009 swidth = $originalWidth«($max_ 
width/$originalHeight) ; 
010 $height = $max_height; 
O11 } 
012 if ($originalWidth == $originalHeight) { 
013 $width = $max_width; 
ais $height = $max_height; 
I5 } 


18 Retain transparency 

= |f you test your script with a PNG that features 
PNG transparency, you will notice that the alpha 
channel is replaced with black. In order to fix this little 
problem, we need to add three lines of code within our 
function to save the alpha channel. Add this after our 
$image_tn variable declaration 


001 $image_tn = imagecreatetruecolor($width, 
$height); 

002 imagealphablending($image_tn, false); 
003 imagesavealpha($image_tn, true); 

@@4 imagealphablending($originalImage, true); 
005 imagecopyresampled($image_tn, 
$originallmage, 0, 0, ©, @, $width, $height, 
$originalWidth, $originalHeight) ; 


Creating directories 

* It's all well and good creating a thumbnail on a 
temporary basis, but we need to save our thumbnails to 
make them more permanent. The first thing to do is 
create a directory that will hold our newly created 
thumbnail image. This IF statement will check to see if a 
folder called thumbnails already exists on our server; if it 
doesn't find one, it creates it. 


O01 if(!is_dir(‘thumbnails’)) { 
002 mkdir (‘thumbnails’); 


003 } 
20 Setting a filename 


© This next section of code will create a file name 
for our newly created thumbnail, and pair it to our 
thumbnail directory. We are going to take the original 
filename, add an _tn to the end of it, then save it so it 
has the correct extension. Add this variable after our 
create directory code, 


01 $TN_filename = 
‘thumbnails/’.$filetype[0].‘_tn.'.$filetype[1]; 


a Saving our thumbnail 

Now our thumbnail folder is set up and is 
writable, we can save our thumbnail to this directory. 
Our function can now act as a batch thumbnail tool if 
multiple images are passed to it via a foreach loop. Add 


Code library 


the following code to the end of our function before the 
image is destroyed 


001 imagejpeg($image_tn, $TN_filename, 100); 


22 Handling PNGs 

= Run the code; you'll see our thumbnail has been 
created in the new thumbnail folder. We just need to 
wrap the last step in a final IF statement; this means we 
will be able to save our PNG thumbnail files, including 
the alpha channel. Replace the last step with this code. 


001 if (preg_match(‘/jpg|jpeg/’, $filetypef1])) 
{ 
002 image jpeg(Simage_tn, $TN_filename, 100); 


4 if (preg_match(‘/png/’, $filetypel1])){ 
imagepng($image_tn, $TN_filename, 9); 
} 


Exploring the GD functions 


Use this section to find out a bit more about various GD functions that we 


have covered in this tutorial. 


Thisis the base of all 
image creation -it 
creates a black work 
area, which we can 
then modify. 


This function allows 
us tocarry over alpha 
channel data; it can 
also create blends. 


} 


@@1 simage_tn = imagecreatetruecolor($width, $height); 

002 imagealphablending($image_tn, false); 

003 imagesavealpha($image_tn, true); 

004 imagealphablending($originallmage, true); 
imagecopyresampled($image_tn, $originalImage, 0, ©, ©, ©, 
$width, $height, $originalWidth, $originalHeight) ; 


@07 Sfiletype = explode(‘.’, $image); 

008 if (preg match('/jpgljpeg/', $filetypel1])){ 

009 imagejpeg($image_tn, null, 100); 

10 

if (preg_match(‘/png/’, $filetypeL1])){ 
imagepng($image_tn, null, 9); 


if(lis_dir(‘thumbnails')) { 
mkdir(‘thumbnails'); 


$TN_filename = ‘thumbnails/'.$filetype[0]. ‘_ 


if (preg_match(‘/jpg|jpeg/', $filetypel1])){ 
imagejpeg($image_tn, $TN_filename, 100); 


if (preg_match(‘/png/', $filetype[1])){ 
imagepng($image_tn, $TN_filename, 9); 


a11 
Createsa clearer 012 
version of our 013 
thumbnailthanthe R 
alternative 014 
imagecopyresized, 15 
though both takein ~- 
similar variables. 016 

017 } 

019 

tn.'. $filetype[1]; 

020 

21 
Usedtobothcreate 923 } 
and saveimagesin 024 
JPGand PNG format. 025 
Savingisachievedby fa, 
passinga filename 026 } 
intothefunction. 027 

028 


imagedestroy ($image_tn) ; 
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Animate 
designs 
for HTML5 
Canvasin 


Flahcs6 Æ 


Want rich animated content on an iPad 
webpage? Flash CS6 can now publish 
to a friendly HTML5 format, making 
your workflow much easier 


tools|tech|trends Flash CS6, Toolkit for CreateJS, Dreamweaver 


With Adobe CS6, Flash can 
use a special panel to export 
your animation to Canvas 
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lash has had something of 
a hard time of late. The 
ever-increasing rise of 
tablets and smartphones - 
and the distinct lack of 
Flash on webpages for 
those devices - has caused 
Flash to fall from its once 
lofty heights. Rich 
animations that have 
previously been possible in Flash have been pretty hard 
for a mere mortal to achieve in HTML5 Canvas. Adobe 
has bounced back with the help of Grant Skinner, who has 
developed the CreateJS framework, This is a modular 
framework for working with the Canvas element, and it 
makes it much easier to get rich content. With Adobe CS6, 
Flash can use a special panel to export your animation 
straight to Canvas. It won't export all Flash interactivity, 
but it puts Flash back firmly on the map as the animation 
tool for the web, and all interactivity can be added in 
JavaScript once exported. 


o Installing the software 

In order to complete this tutorial you will first need 
to download a version of Flash CS6 (www.adobe.com/ 
downloads); click Flash CS6 professional to download 
and then install. You will also need the CreateJS plug-in 
available from www.adobe.com/go/downloadcreatejs. 
Double-click to install - provided you've installed the new 
Flash CS6 first. Now copy the Start folder from the CD 
over to your desktop. 


Start Flash 

Go ahead and open up Flash CS6, and then 
open ‘mini-monster-start.FLA’ from the Start folder. Click 
on the monster on the screen and then add the 
instance name of ‘monster’ inside the Properties panel. 
This will become important when we add interactivity 
later on in this tutorial. Now double click the monster to 
open the movie clip. 


Add frame labels 

Create a new layer and name it ‘labels: Now, 
select frame 1 and then add the frame label ‘idle’ inside 
the Properties panel. Select frame 5 and press F6 to add 
a keyframe, and then add the label ‘roaring’. If you take a 
look at the timeline then you will see the idle pose is 
complete but the roaring needs work, Select frame 5 of 
the body layer and hit F6. 


Explore the roar 

Double-click the head2 symbol on 
the stage and then drag the playhead 
along. As you can see, it is just the mouth 
that's tweened open and shut with 
appropriate keyframes. When you are 
creating an animation for export using the 
CreateJS toolkit, it's important that you use 
the classic tween inside Flash, otherwise 
you will get problems. 


Make it wave 

Now rotate the arm so that it mirrors the other 
arm again. Select frame 10 and press F6, and then 
rotate the arm until it matches the other arm. Select 
frame 6, Shift-click on frame 10 and then Alt-drag this 
along the timeline in order to copy these keyframes. 
Keep on doing this until you've got the same frames as 
in the other arm layer. 


Underneath the timeline, click on 
the monster symbol in order to return 
back to that. Select frame 5 of the 
uppermost arms layer and then hit F6. 
Using the Free Transform tool, rotate the 
arm as shown in the screenshot so that it 
mirrors the other arm on the monster. Now 
select frame 6 and press F6 again to add 
another keyframe. 


o Adding the body 

Select the monster's body and then select the 
Free Transform tool. Hold down Alt and drag up on the 
top handle to about 110%. Using Alt like this keeps the 
bottom in place and just extends the top edge up. Select 
frame 70 of the body layer and press F5 to extend the 
timeline. Select frame 70 of the frontfoot layer and hit F5 
to extend that layer. 


Placing the head 

Select frame 5 of the head layer and press F7 to 
add in a new blank keyframe. From the library, grab the 
symbol head2 and then drag it onto the main stage. 
Place it on top of the body symbol. Now select frame 
70 and press F5 to extend the timeline. You can play 
through the timeline, if you like, in order to see the 
monster's head growling. 


Corruptcontent 


Smaller 
file size 


Click on any frame that's between 5 and 10, and 
then Shift-click on any frame that's between 55 and 60. 
Right-click on the frames and choose Create Classic 
Tween from the drop menu. Now select frame 70 of this 
layer and press F5 to extend the timeline. If you play the 
animation now then you should have two arms waving in 
a very ‘scary’ manner. 


When you export, 

se Hosted Libs for a 
smaller file size. These 
are cached in the 
browser from different 
sites that use the 
libraries, so they make 
the files load quicker. 


01 Grouped graphics 
Grouping graphics and placing them 
inside a graphic symbol or movie clip, 


h useful, usua in content 


02 Tweenception 

Tweened symbols, nested inside other 
tweened symbols are another no-no. This 
resultsin content missing from the 


export; but frame-by-frame animation 


is 


will work 


03 Movedrotation 
Each symbol’ rotation point is the white 
spot inside it. You can pick this up and 


move it, but sometimes th adverse 


effects on the output from Flash 
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First export 


It's time to try out our first export. Navigate over to Window> 


It’s all in the eyes 


If you now double-click on the eyes symbol then 


you will notice that it has got its own timeline. At the Other Panels>Toolkit for CreateJS. Inside the panel, hit the Publish 
end of this are a couple of keyframes that have some button. You will then be shown a preview inside the browser, and it 
blinks. Because this is not tweened it will play okay. If should look pretty much like it would do in Flash, but it's actually 

you nest tweened symbols inside tweened symbols, running natively in HTMLS. There is no sound to accompany the 
however, it will cause problems. Return back to the animation al the moment, so go to File>Import>Import to Library and 
monster symbol now. choose roar.mp3 from the start folder. 


2 Add the sound 


To give the monster a voice, you will need to add a new layer 
and name it ‘sound’, and then add a keyframe to frame 5. Inside the 
properties, add roar.mp3 as the sound from the drop menu. Once 
you've done that, export the project again. You will notice the roar still 
doesn't play, which is a bit of a pain. CreateJS has created a folder 
named sounds, but it's empty. Drag roar.mp3 into this and refresh the 
browser; it should play okay now. 


Build the scenery 


Return to Flash and click the Scene 1 icon under 


the timeline to return to the main stage. Select the floor 
layer and draw a rectangle for the ground, then hover 
your mouse over the top edge until a small curved line 
a ee EES PAS appears next to the cursor. Click and drag to bend the 


— 
nen moore a top edge into hills. 


T A mountain to climb 
Select the hills layer on the timeline, and from 
the library add the mountain symbol. Copy and paste 
this a couple of times so we have a small mountain 
range. Use the Free Transform tool to resize the 
mountains so that they're not all the same - be as 
random as you want with this. 


t for CreateJS, you will notice 

al files are generated, which 

n quite confusing. You = 
obviously get an HTML page, which Adding code 
You can add simple 
timeline control into 
projects that are to be 
exported to CreateJS, like 
stopping the timeline and 
playing a frame label. Not 
much else can be added in 
Flash though. 


ntai our HTMLS Canvas 

»ment that the animation is 
contained within. There isa folder 
reated called libs, which contains all 
the functionality libraries needed. 
This consists of EaselJS, MovieClip, 
PreloadJS, SoundJS and TweenJS. 
These are modular libraries of code 
that give the same functionality to 
Canvas that you will find in Flash, 


such as the ability to preload content 


Head in the clouds 
To finish off our landscape we just 
need to sort the sky. Select the background 
layer and, from the library, drag the cloud 
symbol onto the stage. Copy and paste the 
cloud so you have three copies of it placed 
randomly around the sky. As in the previous 
step, use the Free Transform tool to resize 
the clouds so that they look a little different. 


play soundsand The other 


folder is for sounds, and we have to 


manually add sounds to this folder as 

in the tutorial. The final file is the 

JavaScript file that contains all your 
aphical data and animation, Thisis 

named e: the same as your 


exported HTML file. 
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à Export again 

# Hit the Publish button on the 
Toolkit for CreateJS panel to see the 
animation in all its glory. We want this 
animation to play when you click on the 
monster. So return to Flash, double-click 
the monster and select frame 1 of the 
labels layer. Open the ActionScript panel 
and add the code shown below, which 
will stop it playing when exported. 


001 /* js 
002 this.stop(); 
003 x/ 


a Back to the start 

~ Select the last frame of the labels 
layer and press F6, then open the 
ActionScript panel and add the code 
shown below. This will send the playhead 
back to the start. Save the file and 
publish it again, We are now ready to edit 
the pages in Dreamweaver to add some 
interactivity to the monster, and enhance 
the user experience. 


G01 /* js 
this. gotoAndStop(“idle”) ; 
*/ 


The library is exportRoot, so 


were going to find that phrase 
and replace it with mLib' for 


monster library | 


A 


19 Making it click 


we call it here. 


01 mLib.monster.onClick = monsterClick; 


Find the closing bracket for the handleComplete 
function and add the line of code shown before the 
closing bracket. This tells the monster symbol to 

accept a click and to call the function ‘monsterClick’ 
when the monster is actually clicked. Remember back 
in step 2, we named the instance monster, this is what 


have completed the code, 


function monsterClick(eventObj) { 
mLib.monster . gotoAndPlay(“roaring”) ; 


20 Adding the interactivity 

` Add the function shown below after the closing 
bracket of the handleComplete function. This tells the 
monster's timeline to jump to the roaring label we 
added in step 3. As you can see it is the same friendly 
code we would use in Flash, Save the project now as we 


Find and replace 

Open up the HTML file that was published in Dreamweaver and then press 
Ctrl+F on the keyboard to do a find-and-replace search. The library is called 
exportRoot, so we're going to find that phrase and replace it with ‘mLib’ for monster 
library. This is much easier to remember and also a little shorter to write. There will 
only be three instances of this, but it's good practice for future projects. 


var loader = new PreloadJSCfati 
Loader. instal IPlugin Sound): 

loader onComplete = handi 
Loader, LoadMani fest (nani fesi 


complete 
t); 


29 
function handlecompleteC) { 
1 mib eri 


stage = new Stags 
stoge.addChi lu 
stage update); 


} 


function playSound(nane, Loop) { 
‘Sound)S.playCname, SoundJS.INTERRUPT_EARLY, 8, 0, Loop); 


} 
</script> 


Final test 

To witness the fruits of your labour, open the 
page in a browser that is capable of displaying HTML5 
Canvas content. At first, the monster will just sit there 
dormant and blink from time to time until the user 
animates it. Click on the monster and he'll let out a cute 
roar. What we have now completed is an incredibly easy 
method for adding rich animated content to the Canvas 
element in HTMLS. The uses for this are only limited by 
your imagination, and digital drawing skills! 
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Draw a 
spinning 


cube with 


C5900 


Transforms 


Get to grips with the third dimension 
by making a 3D spinning cube that 


reacts to user input 


tools|tech|trends HTML, CSS, JavaScript 


Mark it up 


We'll start by writing the markup for our die; 
‘ours is based on David DeSandro's example (http:// 
desandro.github.io/3dtransforms/docs/cube.html). 
We need a container, the die div itself and then each 
face of the die inside it. To make for easier identification 
you might want to colour each face as well. 


02 A little perspective 

You should now have a very basic list of 
numbers going down the page. We'll start by adding 
some CSS to the containing section. This element is 
essential as it sets the 3D perspective to use for the 
cube. 3D perspective can be pretty confusing: as a rule 
of thumb, the lower the value the flatter the 3D 
elements appear - a value between 700-1,000px 
usually works well. All CSS3 values are unprefixed for 
brevity, but add them into your own code (eg 
-webkit-perspective, -moz-perspective, etc). 


146 Web Design Tips, Tricks, & Fixes 


3 Hn 
K A & 


Preserve 3D 

Next we will add the basic values to the cube. 
We're giving it a defined width and height in pixels 
because Firefox currently behaves oddly when given 
percentage values. The transform-style property 
ensures that child objects are also 3D (the other 
possible value is flat). 


Set the sides 


Each side of the die shares some common 
values. The box-sizing property ensures the border only 
detracts from the height and width, rather than adding 
to it. We position the sides absolutely so they sit on top 
of one another. This also means the last element is the 
one visible to non-compatible browsers. 


f you've ever thought that CSS 
is too basic then you haven't 
met CSS 3D Transforms. As web 
developers we're used to 
working on two axes - x and y 
- commonly known as left, right 
and top, bottom. 3D space 
Introduces a third axis: z. 
Traditionally, the only time we 
use this is in changing the 
z-index of elements to stack them in a certain order. 

The 3D Transform functions at our disposal are: 
matrix3d, translate3d, translateZ, scale3d, scaleZ, 
rotate3d, rotateX, rotateY, rotateZ and perspective. We'll 
be covering all but the translate and scale functions in 
this tutorial by making a cube with images spin as a 
result of user input. With the festive season - and the 
slew of board games it brings with it - upon us, we were 
inspired to make our own virtual die with CSS. 

WebKit has had support since 2009. Fastforward 
three years and only the current versions of Internet 
Explorer and Opera do not have support for 3D 
Transforms, so as long as you use them in a way which 
means they gracefully degrade then you should have 
no trouble in adding some visual flair to your website, 
Reeder for Mac has a brilliant example of this in practice 
- check it out at http://reederapp.com/mac. 


Rotate the faces 


Now each side is stacked onto one another we 
need to rotate and translate them to generate a cube. A 
cube is, of course, made up of six faces - each face is a 
square that is rotated by 90 degrees to make up the 
three-dimensional form. The translateZ function 
positions each plane in 3D space. We find the best way 
to get to grips with it is to play around with the values; 
try 200px and see what happens. 


“Mata fewtines of Css and We can sbe our cube: coining teacher 
‘Colouring the faces makes eactiimmediately identtiabie f 


translateZ( 100px ); } 
006 #dice .bottom { transform: rotatex( -9@deg) 
translateZ( 10@px ); } 


06 Square or cube? 

You should now be presented with... a square! 
But don't be fooled, it's actually a cube front on. You can 
test this by opening up the inspector and manually 
updating the degrees in transform: rotateY(ndeg) on 
#dice to see the other faces reveal themselves. It's 
important to tweak different values to see how they 
affect one another to really understand 3D Transforms. 


07 Setting up 

Now that our CSS is in place we can start adding 
some JavaScript to dynamically update and rotate the 
values. Create a file called ‘diejs’ and link to it from the 
HTML page. Within it we will declare some of the 
Variables that we'll be using to make it spin. 


//index.html 

<script src=“scripts/die.js”></script> 
//die.js 

var rotateY = @, 


T eotese onome ouea taraa- paton 


rotateZ = ð, 

die = document. getElementById(‘dice’), 
height = window.innerHeight / 2, 
width = window. innerWidth / 2; 


08 Dealing with browsers 

Before we update values it would be useful to 
make a function that updates the CSS for us depending 
on which browser is being used to view the website (for 
example, WebKit browsers use webkitTransform, Firefox 
uses MozTransform, etc). To accommodate multiple 
browsers, we'll write a function that accepts which 
element to style (el) and a string with the CSS Transform 
that we wish to apply (value). 


function setTransform( el, value ) { 
if ( typeof el.style.transform !== 
‘undefined’ ) { 
el.style.transform = value; 
} else if ( typeof el.style.webkitTransform 
!== ‘undefined’ ) { 
el.style.webkitTransform = value; } 
else if ( typeof el.style.MozTransform 
!== ‘undefined’ ) { 


(Profix it 


Prefixes can very quickly become 
arduous to write. Luckily Prefixr 
(http://prefixr.com) lets you paste 
in your unprefixed code and adds 
it all in automatically to save you 
the hassle - and RSI! Better still, 
there's a Sublime Text package 
(http://wbond.net/sublime_ 


packages/prefixr) 
that does the same job. 


008 el.style.MozTransform = value; } 
else if ( typeof el.style.msTransform !== 
‘undefined’ ) 
{el.style.msTransform = value; 
} else if ( typeof el.style.oTransform !== 
‘undefined’ ) { 
el.style.oTransform = value; 
} else { 
alert(‘This browser doesn\’t support 3D 
transforms’); 


} 
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3D to 2D 


For the foreseeable future 
it’s best to include 3D 
Transforms as visual flair 
that enhances a user 
experience but gracefully 
degrades for the 
browsers that don't 


yet support them 


Rotate the die 

To turn the cube all we have to do is update the 
CSS values every x milliseconds to give the illusion of it 
moving seamlessly. We reset the values once they 
reach 360 (ie have done one revolution), so they don't 
go to silly astronomical figures. We then update rotateY 
by 1 and apply the Transform with setTransform(. 


setInterval(function() { 

if ( rotateY >= 360 ) rotateY = 0; 

if ( rotateZ >= 360 ) rotateZ = 0; 
A rotateY++; 
005 setTransform( die, ‘rotateY(‘ + rotateY + 
‘deg) rotateZ(‘ + rotateZ + ‘deg)’ ); }, 20); 


, User interaction 
We now know how to update the die to rotate, 
but it's really screaming for some user interaction. We're 
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going to influence the way it spins by changing its y and 
z axes every time the cursor is moved. event.pageY/X 
informs us where on the page the user clicked - we'll 
use this data to adjust which direction it spins. 


function rotateDice( event ) { 
- event.pageY > height ? rotateY++ : 
rotateY--; 
GOB event.pagex > width ? rotateZ+ : 
rotateZ--; 
004 setTransform( die, ‘rotateY(‘ + rotateY + 
‘deg) rotateZ(‘ + rotateZ + ‘deg)’ ); 
} 


Add in event listeners 

Then we simply need to include our mouse 
and touch events. One of the greatest advantages that 
CSS 3D Transforms can boast is that they work 
fantastically across mobile devices. A large part of this 
is because Apple championed the spec and has 
included support for it since the very first version of iOS. 
Android and BlackBerry also have support for 3D 
Transforms in their default browsers. 


Bð document. addEventListener( ‘mousemove’ , 
rotateDice, false ); 


02 document .addEventListener( ‘touchmove’ , 
rotateDice, false ); 


From cube to die 

So we've got a spinning cube - woohoo! That's 
all well and good, but it's not very, well, useful. Instead, 
we're going to build on the work we've done so far and 
turn that cube into a die. Comment out the setinterval 
and rotateDiceQ functions - we're going to use similar 
techniques but applied in a different way. 


B Adding images 

To make it look more die-like we have created six 
SVG files of dots in the traditional layout. You'll need to 
replace the text reading 1-6 with the images. SVG is an 
ideal format for 3D Transforms because, just like CSS, it 
scales without distortion when zooming in. This means 
that, even when animating, the graphics remain crisp 
and sharp. A great example can be seen on Beercamp's 
latest site: http://2012.beercamp.com. 


I <div id=“dice”> 

@2 <section class=“front side”><img 

src=“images/1.svg”></section> 

<section class=“back side”><img 

src=“images/2.svg”></section> 

<section class=“right side”><img 
src=“images/3.svg”></section> 

8 <section class=“left side”><img 

src=“images/4.svg”></section> 

<section class=“top side”><img 
src=“images/5.svg”></section> 

2 <section class=“bottom side” ><img 

Í src=“images/6. svg”></section> 

</div> 


. Generating random numbers 
Now we are going to write a function that will 
simulate the roll of a real-world die by generating a 
random number between 1 and 6 and then spinning the 
die to that number. Math.floor rounds up the number 
generated from Math.random0), and we multiply it by 
the sum of the highest number (6) subtracted by the 
lowest number (1) then add 1. This gives an answer of 
0-5, so we add 1 to make it 1-6. 


007 function roll() { 
var result = Math.floor( Math.random() * ( 
6-1+1))+1; 


5 Using setTransformO 

Apart from the special case of 5 being on the top 
and 6 being on the bottom, we can rotate our die with a 
single line. Just as we made our cube by rotating 
90-degree right angles, we spin it in the same way. By 
doing 90 * (result), we get to the face we want - eg 90 * 
3 = 270, which is the angle of the third face. 


OOH if ( result !== 5 a& result !== 6 ) { 
setTransform( die, ‘rotateY(‘ + 90 * result 


+ ‘deg)’ ); 
} 


16 Exceptions to the rule 

In the case of 5 and 6, we'll hard-code those 
values in. We're also using a new Transform function 
here: rotate3d. This is a shorthand way of setting the x, 
y and z degrees simultaneously (akin to margin instead 
of margin-left). We could also have written 
rotatex(90deg) to produce the same effect. 


G0 else if ( result == 5) { 
setTransform( die, ‘rotate3d(1, ©, 2, 

~90deg)’ ); 

@02 } else if ( result == 6) { 
setTransform( die, ‘rotate3d(1, 0, 0, 

9@deg)’ ); 

} 


Adda button 

We've decided to add a button so the user is not 
always reaching for the console to make the die roll. This 
is easily done with just a tiny bit of HTMLS5 and, in the 
following step, we'll work on a click handler. 


BÖ <button id=“roll”>Roll the die!</button> 


Click and roll 


In our JavaScript file, add another click listener 
but this time to #roll that will trigger the roll() function. 
Now all you have to do is click the button and watch the 
die instantly change which face is presented to the 
viewer. You'd think that making it transition from one 
face to another might be quite difficult in 3D space, but, 
thankfully, browser vendors are on our side. 


001 document .getElementById( ‘roll’ 
).addEventListener( ‘click’, roll, false ); 


Add transitions 


The cherry on top is making the die transition to 
these different degrees instead of just displaying them 
straight away. We can do this with another CSS3 
property - transition - added to #dice. Now click the 
button and you'll be treated to some eye candy (just 
don't forget to prefix itl). You can also play about with 
different transition timing functions (ease, linear, etc) to 
see how each affects the spin. 


OOF #dice { 


transition: all .5s ease-in; 
} 


Visual feedback 


Currently it's not very clear to the user if clicking 
the button changed the value if the same number is 
generated. To give a bit of visual feedback we will spin 
the die and then set the correct value - this way, even if 
the same number is generated, the user will know for 
certain that their click was registered. 


+A specially written function ensures that all 
rolls ofthe die are as random as the real thing 


BT var offset = Math.floor( result / 2 ); 
setTransform( die, ‘rotateY(‘ + 90 * offset + 
‘deg)’ ); 
002 setTimeout(function() { 

// previous if statements go here 
3, 250); 


In the right direction 


To prove that we're now masters of 3D 
Transforms we'll write a function that will spin the die in 
the direction of the arrow clicked. This is a bit more 
complicated than before because we have to parse the 


current value that the die is and then add or subtract 90 


from it; the annotated source code is on the CD. 


BÖ document. addEventListener(‘keyup’, 
function( event ) { 
002 var numbers, rotate; 
if ( event.keyCode === 37 ) { //left 
numbers = die, style.webkitTransform. 
match(/-?\d+/g) ; 
@03 if (numbers === null) numbers = [0]; 
rotate = parseInt( numbers[numbers. 
length-1], 10 ) + 90; 
004 setTransform( die, ‘rotateY(‘ + rotate + 
‘deg)’ ); 
G05 } else if ( event.keyCode === 38 ) { //up 
setTransform(die, ‘rotate3d(1, @, 0, -90deg)’); 
006 } else if ( event.keyCode === 39 ) { // 
right 
numbers = die.style.webkitTransform. 
match(/-?\d+/g) ; 
007 if (numbers === null) numbers = [0]; 
rotate = parseInt( numbers[numbers. 
length-1], 10 ) + -90; 
setTransform( die, ‘rotateY(‘ + rotate + 
‘deg)’ );} 
008 else if ( event.keyCode === 40 ) { //down 
setTransform( die, ‘rotate3d(1, 0, 2, 
90deg)’ ); 
} 
}, false); 


Conclusion 
Although in this tutorial we've only used images, 
because it’s just HTML and CSS we can make absolutely 


anything 3D that we want. That's right, the floating cube 
of kitten GIFs and videos you've always dreamed of is 
now within reach! The following code is just one 
example of the flexibility 3D Transforms offer us. 


<div id=“dice”> 
<section class=“front side” 
><video 
src=“keyboard-cat .webm”></section> 
<section class=“back side”><p>To the crazy 
ones</p></section> 
005 <section class=“right side”><img 
sre=“lolcat. jpg”></section> 
<section class=“left side”><iframe 
src=“http: //www.webdesignermag.co.uk/”></ 
iframe></section> 
</div> 


3D Transforms 101 


Understanding the concept behind 3D 
Transforms in CSS3is pretty 
straightforward. The element is rotated 
abouta single axis (or multiple axe 
and the browser handles this for you 
rendering in a three-dimensional scene. 
The reality of itis alittle less 

predictable if you're not familiar with 3D 
rendering, however. The origin fora 
transformation, the perspective of the 
viewpoint and element, plus the 
collapsing of other transformations can 
quickly make for a mess when you're 
trying to create a simple effect. Also keep 
in mind that currently only WebKit 
browsers fully support the proposed 3D 
Transforms - although this will 

ly change over time. 

at place to start learning about 
how 3D Transforms work is the WebKit 


blog, which features a series of examples 


and explanations to help you get up and 


running quickly: www.webkit.org/ 
blog/386/3d-transforms. 
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Model in 3D 
with SketchUp 
to build your 
own product 
turntables 


Learn to create an interactive 
eCommerce product turntable with 
fallback for non-Flash devices 


tools /|tech | trends SketchUp 8 (free version), YoFLA 3D Rotate Tool 


s a web designer you will 
often be called on to do 
work outside your normal 
comfort zone, and it’s at 
times like this that you 
can rise to the challenge 
and add valuable, 
transferable skills to your 
repertoire. One such skill 
is generating product 
display images. It may not 


be the sexiest way to earn 
a living, but doing a bit of it here and there around more 
creative work sure could pay some of the bills. In this 
tutorial you will learn how to take this a step further, by 
generating a fully interactive 3D product visual that 
allows customers to view the product from all angles - 
instead of pre-selected photographs. The generated 
code is easily copied and pasted into an eCommerce 
website or product showcase, and you will create both 
Flash and HTML5/JavaScript versions which will 
swipe-rotate and pinch-zoom when viewed on a 
non-Flash device such as an iPhone or iPad 


You will learn how to generate a fully interactive 3D visual that 
allows customers to view the product from all angles : 
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Gather your tools 

For this tutorial you will need 
SketchUp 8 or better (sketchup.com) 
and Yofla’s 3D Rotate Tool (www.yofla. 
com/flash/3d-rotate/flexi). You also 
need some plug-ins for SketchUp which 
will allow you to set up the virtual 
camera rig you will use to generate the 
images used in your turntable animation. 


o2 SketchUp templates 
Install the Advanced Camera 
Tools plug-in by downloading from bit. 
1y/15fWXGQ. Open SketchUp and select 
one of the plan templates as shown. Click 
Start Using SketchUp. You should see an 
empty window. Click on the Get Models E 
button (the one with a cardboard box). {= 
This takes you to the 3D Warehouse. 


(@3 Finding 3D models 

. When you are working on a client's website 
you will either have to construct your own models or 
you will use models that have been previously 
created by another 3D artist instead. If you're not 
interested in giving this a go for yourself, download a 
pre-made model now. Type in ‘iphone 4’ and hit 
Enter. Select the model you wish to use and select 
Download Model. Click Yes. 


ID Rotate Yok wary 360° p 
Œ | O wow.yorta.com/fiashy/3:-rotate Me) 


3D Rotate Tool ...easy 360° product photography! 


Home | Changelog | Manual | References | Download / Buy 
ences Google 3D warehouse {jpone 4 


30 Warehouse Resuts [Sorted by relevance JE] 


IPhone 4 
by Dulohanaaon 
Thenew IProne 4 By Danii. 


aca 
iPhone 4 = 

by 6 by 

hie Phone 4 nade by mo OMY arta Prone 4 Fe" 


Download Model Donnioad Mode! 


odors E) E hances sens 


Resuts 1- 12 of many for iphone 4 (0.1 seconds) - RSS 
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SketchUp Pro 


04 Importing the modes 

Now head back inside SketchUp and place the 
model at the intersection of the axes. Use the middle 
mouse button to zoom in or out. Now hold it and move 
the mouse in order to rotate the view. With the Move 
tool, hover over the side of the phone. You should see 
some red crosses. 


o5 Rotating the product 

v Click one of the crosses and move the mouse 
to rotate the phone about its centre axis. Check that 
-90 shows in the bottom-right of the screen, then 
left-click. You've now rotated the phone upright. This is 
all you need to do to prepare a product for an 
eCommerce widget. To skip the modelling section, go 
straight to step 14. 


Web Design Tips, Tricks, & Fixes 151 


06 Product images 

To have a go at creating a photo-based 3D model yourself, read 
on. Go to any phone manufacturer website and find a product 
illustration. Download a front, rear and side-view. Crop them in an 
image editor right to the edge of each side. Ideally you need views 
from all six sides, but three will do for this exercise. 


2.2. O wne coms hmarphere hone a/s. Buon soure egoogeium._ madum ecpsutn_ jerm qua 20ere zaporea fY 


DIS omom sratohoms Tate w amo a 


htc one 


Brace yourve tor hgh tast web oromaing romarna 
‘tre quality ana seamiess gaming visuals mans 1o me 
‘Power quad-core processor Vouti tove he ima 
‘eign and te camera tat captures every moment (even 
In kow ight wy crisp, vid, beaubA protos t alao let you 
take» photo wile snacing HO woo 


kkkt 


Rena an 127 reviews 


08 Photo-based modelling 

Paste the image onto the top-face of the box by clicking the 
bottom-left corner then the top right. Use the Push/Pull tool to move 
each side of the box to line up exactly with the edge of the phone. 
Import and paste the rear image onto the back of the box, clicking on 
the corners of the face. 


Beginning modelling 

In SketchUp go to File>New, then draw a rectangle of any size using the Rectangle tool. Select 
the Push/Pull tool and click on the rectangle, then move up to create a box shape and click again. Go 
to File>Import then select the front image. Select the Use As Texture button and select Open. 


Hosting iframes on 
WordPress 


Install Plugins 
h | Samnch Raut | loan | Fashion | Poplar | owns | Revert Undated 


searen Pine 


O1 Install the plug-in 
If you he elf-hosted WordPress site 

i go to Plug-ins>/ aw. Search for 
Don t fear D {iframel, then click Install. Once this is 
design has alway: 
been done in two 
dimensions, but don't 
let that make you fear 
the third dimension 
Once you get used to 
it you'll feel liberated. 


completed, select Activate 


stand add your titleand 
tthe shortcode as 
shown here, replacing the URL with the 


iframe file in your uploaded folder 


09 Lining up 
images 

You now need to line up the rear 
image with the edges of the box. 
Use the MMB to rotate the view 
so that you can see the back. 
Right-click the rear-face and 
select Texture>Position. Now use 
the green pin to scale the image 
and then click and drag the 
image to position it. 


iew and post 
y your product to test how it looks 
then alter the shortcode to suit the 


pixel-width of your WordPress site and 


the output size you chose in the 3DRT 


tool 
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10 Sampling photo textures 1 Creating the profile 
` Repeat with the side image. Click each of the three faces, then The next thing that you will need to do is 
right-click and select Texture>Projected. Draw a rectangle at the top of sample the side of the phone and then paste this onto 


the phone, Push/Pull it towards the rear face and Ctrl/left-click. In the the side of the rectangular hole that you have just 
Materials pallette, click the Sample Paint tool (the eye dropper). created. Select the Arc tool and use it to create an arc 
BoC JOR ROP S28) 7 F on each side of the phone to follow the phone's 
DAN SOR EKAS 1 Ji contour, as shown at points 1 and 2. Use the Arc tool on 


the front face at each corner. 


2 Radiusing sharp edges 

Now use the Push/Pull tool to remove each 
corner. Once you've finished that, you should have 
something similar to the model shown here, Double- 
click the front face. Now hold Ctrl and deselect anything 
except the outer contour of the phone. Go to 
Tools>Follow Me and click in the outside of the arc you 
made in the rectangle cutout. 


B The finished product! an eee 
This creates a smooth radiused edge all round 3 

the phone. Repeat for the rear face as you can see here. 
Sample and paint the front and rear textures back onto 
the new radiused faces using the Sample Paint tool. Use 
the Push/Pull tool to close the rectangular gap you 
created. Save your phone as it is now finished! 


Changing view styl 

From now on you can use either your own 
model or the one you downloaded. Ensure your phone 
is centred and upright as per steps 4 and 5. Open the 
Styles pallette (Window>Styles) and select Default 
Styles>Shaded with Textures. Go to the Edit tab and 
un-tick Edges and Profiles. 


Image-based modeling 
is going to catch on for 
the3D web 


Image-based modeling (the technique 


that you have been learning here) is 
absolutely perfect for the web. Now 


that there’san overwhelming 


Selecting and 
de-selecting 


Return to the Select tool 
at any time by pressing 
the Spacebar. Also make 
use of the Esc key to 
deselect everything and 
start selecting afresh. 


consensus that the future of the webis 
HTML5 and WebGL, we're going to see 

environmentsand 
even games coming on to the 

nis has always been 

1, butnever before 
have we been able to do this directly 
on to the webpage itself without 
plug-ins. It's an exciting time for 


people who know image-based 


modeling, because thisis the only 
way of making 3D content that allows 5 Creating the camera 

Your model has now lost the 
cartoon look. Click the icon at the top-left 
of the Styles pallette to save changes to 
the style. Use the middle mouse wheel to 
zoom and rotate to get the starting view 
you want for your turntable. Go to 
Camera>Create Camera. You will see a 
cross in the middle of the screen. 


for realistic yet low fi ze models to 


be shown within browsers across all 


devices, including proc or 


challenged phones andtat asing 
models on photographsis also simpler 


than traditional modeling, allowing 


you to create models yourself. 


Web Design Tips, Tricks, & Fixes 153 


16 Focusing the camera a Wireframe view style 
Ctri/left-click on the screen and move the mouse left/right to Notice that at the top-left of the window you ` i i 
pan the camera until the cross is central. You should be able to gauge have automatically created a tab called Camera 1. Click i d 
this with the blue axis. Save the camera view with right-click>Done. this at any time to look through the camera again. Now o 
Now rotate the view slightly (MMB) and zoom out. Can you see the select the Wireframe view style (View>Toolbars>Styles > 
camera you just created? to display the toolbar). Select the Camera, then select I 
the Rotate tool. Click on the Origin as shown here. o rs 
e Ņ 
18 Creating 12 cameras 
Move your cursor along the 


green axis and left-click, then press 
Control and move to the right and click 
again. Enter '30' and press Enter. The 
Camera copies 30 degrees around the 
centre of the phone. Now type ‘IIx’ and 
hit Return. You now have 12 copies of the 
Camera, stationed around the phone at 
30 degree intervals. 


19 Setting up animation 

In the Styles pallette, select the home icon and 
the View Style from earlier. Right-click on the first 
camera and select Look Through Camera. Right-click 
and select Done. Right-click the Camera tab, then select 
Add. Do this for each camera, working anticlockwise, 


EEMeneeenepenseseenggggggt (J 


Action! 

You should now have 12 scenes. Go to 
View>Animations Settings and tick Enable Scene 
Transitions, set it to 1.5 seconds, and enter 'O' in the 
Scene Delay box. Close and Go to View>Animation>Play. 
You should have a smooth turntable animation. 


a Export individual frames 


Export the individual frames of the animation by 
going to File>Export>Animation, then select JPEG from 
the drop down box. Select Options and enter 640 and 
480 into the Width and Height fields. Select Frame Rate 
5 and tick Loop to starting scene. Click OK and enter a 
filename. Click Export. 
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Using 3DRT tool 

Open 3DRT Setup Utility. Locate your images 
and drag and drop them into the orange box at the 
top-left. Set Duration to three seconds. Tick the HI-RES 
box if you would like to enable the high-resolution zoom 
feature (this takes longer to download on the webpage). 
In Advanced Settings and the Rotation tab, un-tick 
Rotate On Start. 


23) Hotspots 
Select Return. Click the Hotspots button. Click 
Next until you can see the rear camera, Press Click to 
add hotspot. Select Image Hotspot. Enter a title and 
Browse to find an image. Go online, find and save a 
close-up of the camera, then go back to this dialog box 
to select it. Type in some details, then hit Save. 


Choosing a skin 

Left-click and hold Place, then drag the hotspot 
to the centre of the camera. Click Wizard. Follow the 
instructions and click Next. Tick Hide in back, click Done, 
then select Return. Choose a Skin and Output Size then 
select Create. Create a folder to export all the necessary 
files to, then navigate to it and browser test the 
index.html file. 


25, Upload to web 
Upload the entire directory to your web server. 
You could now copy and paste the code from the 


index.html file into your web page, but it's much easier 
to use the iframe that’s been created for you. Just copy 
this code into your page, substituting the /wp-content/ 
uploads/productt/ with the location of your folder, and 
setting the desired height and width. 


@@1 style=“border: 1px solid silver;” 
002 marginheight="0” 

003 marginwidth="0” 

004 = scrolling=“no” 

@@5 = src=“http: //www. example. com/wp-content/ 
@@6 uploads/product1/iframe.html” 

@07 —width="400” 

008 = height="300"> 

009 <p>Your browser does not support 
iframes .</ 

@10 p> 

@11 </iframe> 


The finished widget 

You now have the finished rotating product 
carousel. This will load as a Flash file as default. with a 
fallback option of a JavaScript version for non-Flash 
devices such as iPhone and iPad. On the iPhone and 
iPad version, the touchscreen functionality means the 
user can swipe to rotate and pinch to zoom, which is a 
nice feature for today's mobile driven consumers 
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Capture 
webcam 


video without 


aplugin 


Use JavaScript and HTML5 to cut out 
third-party applications and Flash 
components for webcam use 


+ stepixx).htmi/js. 
+ JSCam files 


tools |tech| trends Dreamweaver, HTML5, JavaScript 


oO HTML page setup 

Before we get into any coding, it is worth noting 
that the DOCTYPE for an HTML5 page is different from 
a standard page. There is a lot less information that 
goes into it as HTML5-compatible browsers do not 
require as much information. Create a new HTML 
document and replace the standard DOCTYPE 
information with the following. 


<!DOCTYPE html> 

<head> A 
<title>WebCam Access</title> 
cmb 285 SR Setter RRC SERVE 


<body> 
</body> 
</html> 


02 The video tag 

Go into the body section of your HTML 
document and add the following video tag. The video 
tag is new to HTML5 and allows us to easily embed 
video into a page, simply by adding a source. In this 
case we do not need a source, but can just add an 
autoplay element. 


Ø <video autoplay></video> 


Link toa JS file 

We'll create our webcam access script in a 
separate JS file. This allows us to use it on multiple sites 
and pages if need be. Add the following code 
underneath our video tag. Go ahead and create a new 
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JS document called ‘webcam js’ and save it into the 
same directory as your index file. 


GO <script src=“webcam. js"></script> 


04 Checking browser capabilities 
The first thing we will do in our webcams file is 
check to make sure that the browser used is capable of 
calling the getUserMedia command. This can be done 
with the following JavaScript code. Everything we do 
from here on in will be placed inside this if statement. 


m if(navigator.webkitGetUserMedia!=nul1) { 
` 


o5 Requesting feeds 

At this point we need to set some options that 
we will use further down the line. As mentioned in the 
introduction to this tutorial, there are problems 
accessing audio via a webcam. However, we will set 
audio to true for future use. Add the following code 
within the previous if statement. 


06 Calling getUserMedia 

It's now time to make a call to getUserMedia 
from within our webcam js file. Place the following code 
underneath the closing bracket of the previous step, but 


TMLS is fast becoming the 
developer tool of choice, moving 
away from heavy Flash apps, and 
switching to a fast, lightweight 

„ Solution. A new generation of web 
interaction is coming, where users 
are able to play full games in their 
browser without a hint of Flash. 

Typically, interacting with a user's 

webcam required a third-party 
application or a Flash component, but now we can access 
this data via the cutting-edge HTML5 technology known as 
getUserMedia. As with anything this new and exciting there 
are bound to be some teething problems; the main one is 
the cross-browser compatibility of getUserMedia. It is 
recommended that you use the latest version of Chrome 
as most other browsers simply won't work. We'll cover a bit 
on using Flash as a fallback to HTMLS, but it is probably 
wise to hold off putting this technology into a production 
environment until it becomes standardised. 

Another problem with getUserMedia is that no browsers 
currently support the use of audio. This is fine for this 
tutorial as we will only be covering images, but worth 
noting if you want to deviate from the tutorial steps. 


before the closing bracket of our if statement. This code 
will call getUserMedia and pass all of our required 
options through 


navigator .webkitGetUserMedia(options, 
di 


7 Add streaming function 


Within the brackets of the previous step, add the 
following function. This function, when called, will look 
for our video tag and create an object URL based on 
it. This object URL will be used at various points in our 
code further on. Remember to place this within our if 
statement still. 


function(stream) { — 
$ var video = document 


Kinidas yi. SiGe } 
video. sre = window. webkitURL. 
createObjectURL (stream); 
004 F 
Error handling 


The next step is to add an error statement that 
will write data to console log if there is a problem with 
getUserMedia. Add the following underneath our 
previous step, still within the navigatorwebkitGetUser 
Media brackets. Now we will be able to debug our code 
via the console if there is a problem. 


function(e) { 
console. log(“There was a problem 


v Camera: FaceTime HD Camera (Built-in) 


WEA Eween neces Kiniad 


CC AE ee ¥ Microphone: Default | 
AT A A Pe Wicrophone:Bult-in mout 


with webkitGetUserMedia") ; 


003 } 
09 Running our code 


It's finally time to run our code! Open the latest 
version of Google Chrome and navigate to your 
working directory. The first thing you will notice is a 
notification in your browser window, asking for 
permission to access the webcam. Click Allow and you 
should see a livestream from your webcam 


In-browser options 

You may also notice that the notification bar in 
Google Chrome has an option drop-down menu. 
Opening this will allow a user to select which webcam 
the application has access to. Sound options are also 
displayed here, even though we cannot use them at this 
stage. If you have multiple cameras connected to your 
machine, try out the different options. 


a Handling a denied request 

If a user clicks Deny in the previous step, our 
code will fail and we will have no way of informing them 
why. The easiest thing to do is to create an alert event 
that is tied into the error console. This can be done by 


amending our console.log section to include the 
following additional line. 


aði function(e) { 

002 alert(“You need to allow webcam access 
for this page”); 

f console. log(“There was a problem 
with webkitGetUserMedia”) ; 


004 } 
2 Adding a capture button 


f Now we need a way to capture a still image 
from our webcam feed. Go back to your index.html file. 
Adding the following form element underneath our 
video tag will give us the means to capture a still image 
using some more JavaScript and a canvas element that 
we will add over the next few steps. 


B <form><input type=‘button’ id=‘capture’ 
value=“Smile!"/></form> 


B Adding a canvas 

Canvas is another new element to HTMLS. 
Adding the following tag underneath the previous step 
will give us a place to display the captured image once 


The page at localhost says: 
You need to allow webcam access for this page 


+ With some error handling, we 


allow access to their webcam 


it has been processed by the JavaScript. You can set 
the width and height to anything you like, but 
remember that not all webcams are HD and may 
produce bad image quality. 


' 


ði <canvas id=‘canvas' width=‘300' 
height=‘300'></canvas> 


“ Link button to JavaScript 

h Adding the following script code underneath the 
previous step will link our button to our JavaScript. The 
code listens out for a click on a button with the ID 
capture. If you have multiple buttons on your page that 
do different things, ensure all IDs are unique. This code 
also determines the video source and canvas output. 


001 <script language=‘JavaScript'> 
document . getElementById(‘capture’).onclick = 
function() { 

002 var video = document. 

querySelector (‘video’); 

@@3 var canvas = document. 
getElementById(‘canvas'); 


3 
</script> 
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OOO / Fiwercam access 
paeen 


e> 


Œ [) localhost/WD203/ 
Œ [M localhost/WD203/ 


<Clockwise from top left> 
+ Our output is now scaled correctly, showing the entire resized image on the HTML canvas 


« By looping through pixel data we are able to invert the pixels of the original image 


+ We can also remove all colour and make the image greyscale by looping through the same 


Use on mobile 


As it currently stands mobile 
browsers do not support 
getUserMedia. Hopefully, 
further down the line they 
will, allowing developers 

access to an iPhone camera 

in-browser. 


5 Outputting an image 

Adding two more lines of code to the previous 
step will draw the captured image into our canvas. As 
you can see, the canvas can be used for both 2D and 3D 
elements. As we are working with images, we set this to 
2D. Running the code now will show a captured image 
in our canvas. 


001 document .getElementById(‘capture’). 
onclick = function() { 


Non-cropped images 


The eagle-eyed among you may have noticed 


that the image we produced in the previous step was 


002 var video = document. very heavily cropped. To avoid this and to display a full 


querySelector(‘video'); 
E var canvas = document. 
getElementById(‘canvas'); 

var ctx = canvas.getContext (‘2d’); 
~ ctx.drawImage(video, 0,0); 


size image, we simply have to pass two more variables 
into our ctx.drawlmage command. By passing a width 
and a height we are able to scale our image to the 
canvas size, rather than capturing the top-left section 
of the image. 


06 + 


001 ctx.drawImage(video, 0,0, 300, 250); 
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data, and reducing all RGB values by 255 


Getting image data 

What else can we do with our image? Well, we 
can modify the pixel data with code. An example of this 
is replacing all colour with greyscale. To do this we first 
need to interpret the pixel data with the following line. 


@@1 var data = ctx. getImageData(@,0,canvas. 
width, canvas. height) ; 


Creating a loop 

Now we have the pixel data of the image set as a 
variable, we can loop through and remove all colour. 
The following code bracket sets us up with a loop that 
will do just that. Add this within the onclick brackets 
underneath the previous step. The loop will stop once it 
reaches the image width and height. 


@@1 for(n=0; n<data.width*data.height; n++) { 
002 
003} 


Removing all colour 

The following complete loop will take the red, 
green and blue channels and then reduce the data 
value by 255. Those among you who are familiar with 
RGB values will know that any colour can be made 
using a combination of red, green and blue in 255 
increments. Taking these all to O will produce a black 
and white image. 


øði for(n=0; n<data.widthsdata.height; n++) { 


var index = nx4; 

+4 data.dataLindex+0] = 255-data. 
data[index+0]; 

004 data.data[index+1] = 255-data. 
dataLindext1]; 

005 data.data[index+2] = 255-data. 
data[index+2]; 

a y 


20 Outputting the image 

Now we have removed all colour, we can output 
our new black and white image. Placing this code 
outside of the loop will put the new pixel data back into 
the canvas, at this point you can specify a new canvas if 
you wish to keep the original, unedited capture. 


OOT ctx.putImageData(data, 0,0); 


Flash fallback 


“== As mentioned before, webcam access is only 
available in a select few browsers. To combat this we 
will use a jQuery fallback. Download the jQuery webcam 
plug-in from bit.ly/c8LYyyY, copy the files to your 
working directory and add the following lines of code to 
the head section of your index.htm! file. 


001 <script src=“http://code. jquery, com/jquery- 
1.7.2.min. js"></script> 

02 <script type=“text/JavaScript” src="jquery. 
webcam.min. js"></script> 


22 Add a flash version 

“= Adding the following code under our video tag 
in the index.html file will display the Flash fallback. The 
correct way to do this would be to create two pages 
and do some level of browser detection. You would 
then have a Flash or HTML5 version depending on the 
capabilities of a user's browser. 


<div id=“webcam’></div> 

<p><a href=“JavaScript:webcam. 
capture() ; void(@) ;”>Smile!</a></p> 
@03 <script type=“text/JavaScript”> 
004 jQuery (“#webcam”) . webcam({ 
005 width: 320, 

height: 240, 

mode: “callback”, 

swffile: “jscam.swf”, 

»; 
10 </script> 


© È C D locahonw0203/ 


Code library 
Playing with pixels 


In this tutorial we are taking raw pixel data and manipulating it through 
code. Here's how it’s done 


01 document. getElementById('capture’).onclick = function() { 
var video = document .querySelector('video'); 


Acaptureis 

ipa baidio var canvas = document .getElementById('canvas'); 
listening out fora var ctx = canvas.getContext('2d'); 

form button press. 


ctx. drawlmage(video, 0,0,300, 250) ; 


001 var data = ctx.getImageData(?,0, canvas.width, canvas. height); 
variable thenaloopis 003 For(n=0; n<data.widthédata.height; ntt) { 
createdtoremoveall @ var index = n*4; 

colour values. data.data[index+0] = 255-data.dataLindex+0]; 
data.dataLindex+1] = 255-data.data[index+1]; 
data.dataLindex+2] = 255-data.datalindex+2]; 


08 
oog 
010 ctx.putImageData(data, 0,0); 


Øi navigator. webkitGetUserMedia(options, 
function(stream) { 


The processin the 002 
back end thatis doing 


var video = document .querySelector('video'); 
Stee video. src = window.webkitURL . 
error handling. createObjectURL (stream) ; 
005 i 
006 function(e) { È 
007 alert(“You need to allow webcam access for this page”); 
008 console. log(“There was a problem with 
webkitGetUserMedia”) ; 
009 3 
010 


a 
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The button 


CSS selectors are used 
to achieve its look. 

Text-transform is set to 

upper case and a 1px 

ae border is applied for 
‘ 1 definition. It’s position is 
Me relative to the absolute 

positioned container. 


Fullscreen 

The background 
video is implemented 
using the Video,js and 
BigVideo,js libraries. 
This uses a fit to fill 
method that keeps 
the video's original 
aspect ratio, When 
going narrow, the left 
and right side of the 
video is hidden as the 
video is centred, 


Text shadow 

The body text under the 
main image has a subtle 
drop shadow applied to the 
paragraph <p> tag. The 
shadow uses the 1px value 


Absolute positioning 

To allow for content to overlay the video, 
the containing div tag is positioned using 
the absolute value, This has a top and left 
value, which determines the position. To 
adjust for different screen resolutions a 
percentage value is used instead ofa all round and uses Ô RGB 
fixed pixel value. | values for the colour. 


Transparentimage 
The central logo is made 
up of the page name and 
the year. This is a PNG 
image that offers 
transparency to view the 
video, or background 
image underneath, 


Background image 

The background video is ideal for a 
desktop screen, but doesn't work as 
well on mobile devices, especially 
smartphones, When viewed ona 
mobile device the video background 
is replaced by a fullscreen 
background image. 


i i 


Play full-screen 
‘video clips in the 
background 


inspiration barrelny.com/recap/2012 


arrel is a digital agency 
from New York, and like 
many agencies it enjoys 
showing off its design 
and development skills. 
The 2012 Recap element 
of the site, chosen here 


for our web workshop, 
makes use of a full screen video background. 
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The selected video clip shows an everyday 
scene at the agency to help emphasis who and 
what they are. The short clip runs on a loop 
simply repeating at the end of the clip. The 
length of the clip is around 30 seconds, but it is 
the size that is a more important consideration 
The bigger a clip the longer it will take to load, 
so keeping it short/small will help to ensure a 
more enjoyable user experience. 


y 


HTML5 video player 


Implementing video backgrounds raises the 


issue of compatibility. Obviously, Flash is no longer 
an option for the vast majority of mobile browsers. 
Instead, HTMLS5 video is the present and future, 
and Video js (videojs.com) is a great option for 
implementing HTMLS5 video. Videojs is a 
JavaScript and CSS library that makes it easier to 
work with and build on HTMLS5 video. It provides a 
common controls skin, fixes cross-browser 
inconsistencies, and adds fullscreen functionality. 

Another useful tool built on top of Videojs, is 
BigVideojs (dfcb.github.com/BigVideo,js). This is 
a jQuery plug-in for creating big background 
videos and images. This can play a single video, a 
series of videos, or place a fullscreen fit to fill as a 
moving background image. 


VIDEO VISUAL 


“Adding a fullscreen video 


background and updating 
<comment> | at regular intervals keeps a 
What o i r 
expertsthink | ViSitor’s attention long 
of the site 


enough to stay and check 
what else is on offer. The 
Barrel Recap page has 
short simple videos, but 
these are engaging 
enough to keep the 


viewer hooked.” 
Steve Jenkins, features editor 


INSPIRATION 
Text and typography 


The front page is a simple, clean, and uncluttered 
experience that uses the video background to 
add some unique visual interest. The video is 
black and white, which makes it easier to overlay 


text while still retaining readability. 


The Barrel site uses a single transparent PNG 
graphic to create the header with two different 
fonts. A third font is used for the body text, which 
incorporates a text shadow, again to make it more 
readable. The font combination works well, thanks 
to the different weights, shadow, and the arc 


added to the title. 


TECHNIQUE Create a YouTube video background 


@) Biodiv 
“= The first step is to create a div to 
contain the video. This will have a height 
of 100% and a width of 100%. Add a new 
div tag, <div id="bigvid"></div>, to the body 
and name it accordingly. Add a comment 
to the closing tag for future reference. 


@01 <div id=“bigvid”> 
text will go in here 


002 </div> <!-- // 
#bigvid --> 


, Video container CSS 
The video container will need its 
width and height set to 100%. In the head 
of the page add a set of style tags. Inside, 
add the selector name and then add the 
height and width properties. Include the 

background colour black, this will help 
blend the video into the background 
when it is not at full width. 


Q01 #bigvid { 

002 background-color: #F30; 
003 height: 100%; 

004 width: 100%; 


005 } 
Add video 


Head to YouTube, select a video to 
use click Share>Embed tab and copy the 
iframe code and paste in the div tag 
created in Step 1. Now set the width and 
height to 100%. To hide YouTube 
elements, eg the title bar, add parameters 


after the video URL as shown, See 
bit.ly/znAzhT for a full parameters list. 


801 <div id=“bigvid”> 

002 <iframe width=“100%” 
height=“100%” 

003 src=“http://www. youtube. 
com/embed/MXh 3YRtTiGg?a 
utoplay=1;controls=0;sh 

owin fo=0” frameborder=“0” 
allowfullscreen> 

004 </iframe> 

005 </div><!-- // #bigvid --> 


04 Go fullscreen 

Save the page and preview in your 
preferred browser. The video will currently 
have a space around it - set the body tag 
to O padding and margins. Even though 
the video is set to 100% on both height 
and width, only the width is currently 
observing the width value. Now add 
position:absolute to the video container 
CSS to resolve. 


ði #bigvid { 

002 position: absolute; 
003 background-color: #000; 
004 height: 100%; 


width: 100%; 
16 }<!-- // #bigvid --> 


jm Add an overlay 
o To overlay a div tag over the video 
the div needs to be positioned using the 
absolute value. Add a new div tag and 
name appropriately. Now set the width 
and height to 400px and set position to 


absolute. Add a background colour, but 
make sure that it is one that complements 
the background video. 


007 #start 
002 ¢ 
003 position: absolute; 


004 width: 400px; 
height: 400px; 
z-index: 1; 
background-color: #000; 


008 } 
06 Styling and centring 


To make the div created in the 
previous step a circle, the border-radius 
property is to be used. Add border-radius 
and set to the width of the div tag to 
400px. To position the circle, first add top: 
30%. To centre the circle add left: 50%, 
and margin-left to half the width with a 
minus value, -200px. Finally add some 
padding and text. 

001 #start 

002 { 

003 position: absolute; 

004 width: 400px; 

005 height: 400px; 

006 z-index: 1; 
background-color: #000; 

a border-radius: 400px; 


809 top: 30%; 
O10 left: 50%; 


margin-left: -20@px; 
} 


‘Techtip 

Text shadow 

CSS3 allows users to add a host of 
effects to text, including text-shadow. The 
tag has widespread browser support, 
making it a viable alternative to a graphic 
Plus, if a browser does not support 
text-shadow, the text will still be legible, 

Text-shadow comprises of four 
elements: the vertical shadow, horizontal 
shadow, blur and colour. The first two are 
required, and in practicality so is the 
colour - though it's not essential. 

The vertical and horizontal data 
determine its position. Typically, both 
elements will have the same dimension 
for uniformity. These are commonly set 
to a small size, say 2px, to recreate the 
‘Photoshop’ shadow. The colour is 
determined by the hexadecimal code, 
but will often be a grey, eg #999999. The 
final element is blur, which is determined 
by pixel size. Users can leave this out or 
set to Opx to have a sharp, blur-free 
shadow. The alternative is to select a 
subtle blur, say 2px again, or a more 
creative blur at 10-20px. 

To add a text-shadow it's just a matter 
of adding the vertical, horizontal and blur 
dimensions (in this order) followed by the 
hexadecimal code for the colour: 


h1 {text-shadow: 2px 2px 
Opx #999999; } 


Use minus values to push the shadow to 
the left and above the text. 


h1 {text-shadow:-2px -2px 
Opx #999999; } 


LIFT-OFF 
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Improve your website 
and master industry 
best practices 


Easier testing with Mockery 
Save time and hassle when developing and testing code 


Get to the top of Google 


Boost your site’s ranking by employing SEO techniques 


10 ways to make users click 
Satisfy, engage and meet your end users’ needs 


Customise the Bootstrap framework 
Get away from the ubiquitous default Bootstrap 


Make WebGL headers with browser fallback 


Use 3D headers with Canvas fallback for mobile devices 


Generate HTML code with Ruby 


Create and compile static HTML site content 


Bring super search to PHP apps with Solr 


Index data from and return results to a PHP app 


ee. ee ee 
flame design studio 


Check your PHP code with CodeSniffer 


Ensure your code meets standard coding guidelines 


Create efficient sites using Page Visibility 
Design sites that can handle being out of sight 


Make pixel-based sites responsive 
Convert your existing site with a sprinkling of CSS 


Test code continuously using Sismo 
Start using the Sismo suite to check your PHP 


Deploy a live site using Git 
Learn to deploy sites using Git version control 


Start using Cl and the Hudson Server 
Use a continuous integration server to deploy updates 


COMMUNITY 


PRODUCTS 


SEOmoz is now Moz. 


Wörann amennons 


Introducing Moz Analytics beta. 


Marketing analytics software to manage all your inbound efforts. 


SAMSUNG 


> —— MOCKING DECODED 


v 


A mock object is nothing more than a bit of test jargon 
that refers to simulating the behaviour of real objects. 
Often, when testing, you won't want to execute a 
particular method. Instead, you simply need to ensure 
that it was called. 

For example, imagine your code triggers a method 
that will log a bit of data to a file. When testing this logic, 
you don't want to physically touch the file system, as 
this has the potential to drastically decrease the speed 
of your tests. In these situations, it's best to mock your 
file system class and - rather than manually read the file 
to prove that it was updated - ensure the applicable 
method on the class was called: this is mocking! 
There's nothing more to it than that; it simulates the 
behaviour of objects. 

As your development process matures - including 
embracing the single responsibility principle and 
leveraging dependency injection - a familiarity with 
mocking will quickly become essential. 


MOCKS VS STUBS 


The chances are high that you'll often hear the terms. 
‘mock’ and ‘stub’, thrown about interchangeably. In fact, 
the two serve different purposes. The former refers to 
the process of defining expectations and ensuring 
desired behaviour. In other words, a mock can 
potentially lead to a failed test. A stub, on the other 
hand, is simply a dummy set of data that can be passed 
around to meet certain criteria. 

The de facto testing library for PHP, PHPUnit, ships 
with its own API for mocking objects, but unfortunately 
it can prove rather cumbersome to work with, As you 
are surely aware from your own experiences, the more 
difficult testing is, the more likely it is that the developer 
simply (and sadly) won't do it. 

Luckily, a variety of third-party solutions are available 
through Packagist (Composer's package repository), 
which allow for increased readability and, more 
importantly, writeability. Among these solutions - and 
most notable of the set - is Mockery, a framework- 
agnostic mock object framework. 

Designed as a drop-in alternative for those who are 
somewhat overwhelmed by PHPUnit’s mocking 
verbosity, Mockery is a simple but powerful utility. As 
you'll surely find, it is in fact the industry standard for 
modern PHP development. 


INSTALLATION 


Like most PHP tools these days, the recommended 
method to install Mockery is through Composer 
(though it’s available through Pear too). 

Composer (getcomposer.org) is the PHP 
community's preferred tool for dependency 
management. It provides an easy way to declare a 
project's dependencies, and pull them in with a single 
command. As a modern PHP developer, it’s vital that 


Packagist — 
The PHP package archivist. 


E Search can 


‘mockery/mockery © MM EME 29 5 I e o ce ENS 
| 


| Mockry.t 6: simple yat Rexible PHP mock object Fameworkc ioe use in lint teeing wit PHPUnt, 

_ PHPSpec or any other testing framework, Its core goal is to offer a test double framework with a 

| succint AP! capable of clearty defining ali possible object operations and interactions using a human | Today: 
| readable Domain Specific Language (DSL). Designed as a drop in alternative to PHPUnit's phpunit- 
| mock-objects library, Mockery is easy to integrate with PHPUnit and can operate alongside phpunit-mock-objects without the World 


| ending. 
| Maintainer; padraic 
| Homepage: github.com/padraic/mockery 


| Canonical: _https://github.com/padraic/mockery git 
| Source: https://github.com/padraic/mockery/tree/master 
| Issues: —_hitps://github.com/padraic/mockery/issues 


L 


Mockery may be installed with Composer 


you have a basic understanding of what Composer is, 
and how to use it. 

If working along, for learning purposes, add a new 
‘composerjson’ file to an empty project and append: 


This bit of JSON specifies that, for development, your 
application requires the Mockery library. From the 
command-line, a ‘composer install --dev’ will pull in 
the package. 


As an added bonus, Composer ships with its own 
autoloader for free! Either specify a classmap of 
directories and ‘composer dump-autoload’ or follow the 
PSR-O standard and adjust your directory structure to 


match. Refer to Nettuts+ (net.tutsplus.com/tutorials/ 
php/psr-huh/) to learn more. If you're still manually 
requiring countless files in each PHP file, well, you just 
might be doing it wrong. 


THE DILEMMA 


Before we can implement a solution, it's best to first 
review the problem, Imagine you need to implement a 
system for handling the process of generating content 
and writing it to a file. Perhaps the generator compiles 
various data, either from local file stubs, or a web 
service, and then that data is written to the file system. 
If following the single responsibility principle - which 
dictates that each class should be responsible for 
exactly one thing - then it stands to reason that we 
should split this logic into two classes: one for 
generating the necessary content, and another for 
physically writing the data to a file. A ‘Generator’ and 
‘File’ class, respectively, should do the trick. 
Here's a basic structure (with a healthy dose of pseudo 
code) for our ‘Generator’ class. 
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a5 t 
016 $content = $this->getContent(); 
017 $this->file->put(‘foo.txt’, $content); 


ois} 
019 + 
020 aye 


DEPENDENCY INJECTION 


This code leverages what we refer to as dependency 
injection, Once again, this is simply developer jargon for 
injecting a class's dependencies through its constructor 
method, rather than hard-coding them. 

Why is this beneficial? Because otherwise, we 
wouldn't be able to mock the ‘File’ class! Sure, we could 
mock it, but if its instantiation is hard-coded into the 
class that we're testing, there's no easy way to replace 
that instance with the mocked version 


901 ***php 


002 public function _construct() 


003 { 
004 // anti-pattern 
005 $this->file = new File; 


The best way to build testable application is to 
approach each new method call with the question, 
"How might | test this?” While there are certain tricks for 
getting around this hard-coding, doing so is widely 
considered to be bad practice. Instead, always inject a 
class's dependencies through the constructor, or via 
setter injection. 

Setter injection is more or less identical to 
constructor injection. The principle is exactly the same; 
the only difference is that, rather than injecting the 
class's dependencies through its constructor method, 
they're instead done so through a setter method: 


Bt ***php 

002 public function setFile(File $file) 
003 ¢ 

004 $this->file = $file; 

905 } 
006 


vas 


A common criticism of dependency injection is that it 
introduces additional complexity into an application, all 
for the sake of making it more testable. Though the 
complexity argument is debatable in this author's 
opinion, if you should prefer, you can allow for 
dependency injection, while still specifying fallback 
defaults. Here's an example: 


@01 ```php 

@@2 class Generator { 

003 public function __construct(File $file 
= null) 

004 q 
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005 $this->file = $file ?: new File; 
oo } 

907 + 
008 vee 


Now, if an instance of ‘File’ is passed through to the 
constructor, that object will be used in the class. On the 
other hand, if nothing is passed, the ‘Generator’ will fall 
back to manually instantiating the applicable class. This 
allows for such variations as: 


php 

# Class instantiates File 

= new Generator ; 

004 # Inject File 

@@5 new Generator (new File); 

006 # Inject a mock of File for testing 
OOT new Generator ($mockedFile) ; 


Continuing on, for the purposes of this tutorial, the ‘File’ 
Class will be nothing more than a simple wrapper 
around PHP's ‘file_put_contents’ function 


001 “php 
BOZ <?php // src/File.php 
003 class File 


s í 
[xk 
* Write data to a given file 
007 * 
l * @param string $path 
= * @param string $content 
010 * @return mixed 
ga + 
012 public function put($path, $content) 
a í 
014 return file_put_contents($path, 


$content) ; 
015 } 
016 } 
017 ` 


Rather simple, eh? Let's write a test to see, first-hand, 
what the problem is. 


@01 ```php 

Q02 <?php // tests/GeneratorTest.php 
003 

004 class GeneratorTest extends PHPUnit_ 
Framework_ TestCase { 

005 public function testItWorks() 
a í 


007 $file = new File; 

008 $generator = new Generator ($file); 
009 $generator->fire(); 

010 } 

O11 } 

012 w 


Please note that these examples assume that the 
nec 


ary Classes are being autoloaded with Composer 
Your ‘composerjson’ file optionally accepts an ‘autoload’ 
object, where you may specify which directories or 
classes to autoload. Thankfully this means no more 
messy ‘require’ statements! 


If working along, running ‘phpunit’ will return: 


@@1 ***bash 
002 OK (1 test, ð assertions) 
003 <* 


It's green; that means we can move on to the next task, 
right? Well, not exactly. While it's true that the code 
does indeed work, each time this test is run, a ‘foo.txt’ 


OPEN FILES 
FOLDERS 
Y sre 
¥ libraries 
File.php 
Generator.php 
Y tests 
GeneratorTest.php 
> vendor 
composer.json 


composer.lock 


Though the tests pass, they're incorrectly touching the filesystem 


Plain Text 


file will be created on the file system. What about when 
you've written dozens more tests? As you can imagine, 
very quickly, your test's speed of execution will stutter. 
Still not convinced? If reduced testing speed isn't 
enough to sway you, then consider plain old common 


sense. Think about it: we're testing the ‘Generator’ class; 


why do we have any interest in executing code from 
the File’ class? It should have its own tests! Why the 
heck would we double up? 


THE SOLUTION 


Hopefully, the previous section provided the perfect 
illustration for why mocking is essential. As was noted 
earlier, though we could make use of PHPUnit native 
API to serve our mocking requirements, it's not overly 
enjoyable to work with. To illustrate this truth, here's an 
example for asserting that a mocked object should 
receive a method, ‘getName’ and return John Doe’. 


vay 


php 

public function testNativeMocks() 

{ 

$mock = $this->getMock( ‘SomeClass’ ); 

$mock->expects($this->once()) 
->method( ‘getName’ ) 
->will($this->returnValue (‘John 


While it gets the job done - asserting that a ‘getName’ 
method is called once, and returns John Doe’ - 
PHPUnit's implementation is confusing and verbose. 


With Mockery, we can drastically improve its readability. 


B01 * hp 


public function testMockery() 
3{ 
$mock = Mockery: :mock(‘SomeClass’ ); 
$mock->shouldReceive( ‘getName’ ) 
->once() 
->andReturn( ‘John Doe’); 


Notice how the latter example reads (and in fact 
speaks) better. 

Continuing with the example from the previous 
“Dilemma” section, this time, within the ‘GeneratorTest’ 
class, let's instead mock - or simulate the behaviour of 
- the ‘File’ class with Mockery. Here's the updated code: 


001 “php 


| <?php 

class GeneratorTest extends PHPUnit_ 
Framework_ TestCase { 

@04 public function tearDown() 


005 í 


Mockery: :close(); 

} 

public function testItWorks() 

{ 
$mockedFile = Mockery: :mock(‘File’); 
$mockedFile->shouldReceive (‘put’) 

->with(‘foo.txt’, ‘foo bar’) 
->once(); 
$generator = new 
Generator ($mockedFile) ; 

$generator->fire(); 


Confused by the 'Mockery::close(’ reference within the 
‘tearDown’ method? This static call cleans up the 
Mockery container used by the current test, and runs 
any verification tasks needed for your expectations, 

A class may be mocked using the readable 
‘Mockery::mockQ' method. Next, you'll typically need to 
specify which methods on this mock object that you 
expect to be called, along with any applicable 
arguments. This may be accomplished, via the 
‘shouldReceive(METHOD) and ‘with(ARGY methods. 

In this case, when we call '$generate->fire0', we're 
asserting that it should call the ‘put' method on the ‘File’ 
instance, and then send it the path, ‘foo.txt’, and the 
data, ‘foo bar’, 


‘php 
// libraries/Generator .php 
3 public function fire() 
{ 
$content = $this->getContent() ; 
$this->file->put(‘foo.txt’, $content); 


Because we're using dependency injection, it's now a 
cinch to instead inject the mocked ‘File’ object. 


php 
$generator = new Generator ($mockedFile) ; 


If we run the tests again, they'll still return green, 
however, the ‘File’ class - and, consequently, the file 
system - will never be touched. Again, there's no need 
to touch ‘File’ - it should have its own tests. Mocking 
for the win! 


SIMPLE MOCK OBJECTS 


Mock objects needn't always reference a class. If you 
only require a simple object, perhaps for a user, you 
might pass an array to the ‘mock’ method - where, for 
each item, the key and value correspond to the method 
name and return value, respectively. 


public function testSimpleMocks() 
5 
$user = Mockery: :mock([‘getFullName’ => 
‘Jeffrey Way’]); 
$user->getFullName(); // Jeffrey Way 


RETURN VALUES FROM MOCKED METHODS 


There will surely be times, when a mocked class 
method needs to return a value. Continuing on with our 
Generator/File example, what if we need to ensure that, 
if the file already exists, it isn't overwritten? How might 
we accomplish that? 

The key is to use the 'andReturnO' method on your 
mocked object to simulate different ‘states. Here's an 
updated example: 


“Ss php 
public function testDoesNotOverwriteFile() 
{ 
$mockedFile = Mockery: :mock(‘File’); 
$mockedFile->shouldReceive(‘exists’) 
~>once() 
~>andReturn(true) ; 
$mockedF ile->shouldReceive(‘put’) 
->never (); 
$generator = new Generator ($mockedFile) ; 
$generator->fire(); 


“~ 


This updated code now asserts that an ‘exists’ method 
should be triggered on the mocked ‘File’ class, and it 
should, for the purposes of this test's path, return ‘true’ 
signalling that the file already exists and shouldn't be 
overwritten. We next ensure that, in situations like this, 
the ‘put' method on the ‘File’ class is never triggered. 
This is easy, thanks to Mockery’s ‘never()' expectation. 


“php 
$mockedFile->shouldReceive(‘put’) 


->never(); 


Should we run the tests again, an error will be returned: 


‘Sash 
Method exists() from File should be called 
exactly 1 times but called ð times. 


Aha; so the test expected that ‘$this->file->exists(’ 
should be called, but that never happened. As such, it 
failed. Let's fix it! 


“php 
<?php 
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class Generator { 
protected $file; 
public function _construct(File $file) 
{ 
$this->file = $file; 
$ 
protected function getContent() 
{ 
// simplified for demo 
return ‘foo bar’; 
7 
public function fire() 
{ 
$content = $this->getContent(); 
$file = ‘foo.txt’; 
if (! $this->file->exists($file)) 
£ 
$this->file->put($file, $content); 


ay 


That's all there is to it! Not only have we followed a TDD 
(test-driven development) cycle, but the tests are back 
to green! 

It's important to remember that this style of testing is 
only effective if you do, in fact, test the dependencies of 
your class as well. Otherwise, though the tests may 
show green for production, the code will break. Our 
demo this far has only ensured that ‘Generator’ works 
as expected. Don't forget to test ‘File’ as well, 


EXPECTATIONS 


Now let's dig a bit more deeply into Mockery's 
expectation declarations. You're already familiar with 
‘shouldReceive’. Be careful with this, however, because 
its name is potentially a little misleading. When left on 
its own, it does not require that the method should be 
triggered; the default is zero or more times 
(‘zeroOrMoreTimes()’). To assert that you require the 
method to be called once - or potentially more times 
- a handful of options are available: 


***php 

$mock->shouldReceive( ‘method’ )->once() ; 

$mock->shouldReceive( ‘method’ )->times(1) ; 

$mock->shouldReceive( ‘method’ )->atLeast()- 
>times(1); 


005 ae 


There will be times when additional constraints are 
necessary. As demonstrated earlier, this can be 
particularly helpful when you need to ensure that a 
certain method is triggered with the necessary 
arguments. It's important to keep in mind that the 
expectation will only apply if a method is called with 
these exact arguments. 

Here are a few examples: 
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$mock->shouldReceive( ‘get’ )->withAnyArgs()- 
>once(); // the default 
83 smock->shouldReceive( ‘get’”)->with( ‘foo. 
txt’)- >once(); 
804 smock->shouldReceive( ‘put’ )->with( ‘foo. 
txt’, ‘foo bar’)->once(); 


vey 


This example code can be extended even further in 
order to allow for the argument values to be dynamic in 
nature, as long as they first meet a certain criteria, 
Perhaps we only wish to ensure that a string is passed 
to a method, in which case: 


‘php 
$mock->shouldReceive( ‘get’ )- 
>with(Mockery: : type(‘string’))->once(); 


vay 


Or, maybe the argument needs to match a regular 
expression. Let's assert that any file name that ends 
with ‘txt’ should be matched. 


$mockedFile->shouldReceive(‘put’) 
~>with(‘/\.txt$/’, Mockery: :any()) 
~Ponce(); 
And as a final (but by no means limited to) example, 
let's allow for an array of acceptable values, using the 
‘anyOf' matcher. 


$mockedFile->shouldReceive(‘get’) 
->with(Mockery: :anyOf(‘log.txt’ , 
‘cache, txt’)) 
Ponce); 


With this code, the expectation will only apply if the first 
argument to the ‘get’ method is ‘log.txt’ or ‘cachetxt’. 
Otherwise, a Mockery exception will be thrown when 
the tests are run. 


***bash 

Mockery\Exception\ 
NoMatchingExpectationException: No matching 
handler found... 


003 oe 


Lastly, we have a variety of options for specifying what 
the mocked method should do or return. Perhaps we 
only need it to return a boolean. Easy: 


“php 

$mock->shouldReceive( ‘method’ ) 
->once() 
->andReturn(false); 


PARTIAL MOCKS 


You may find that there are situations when you only 
need to mock a single method, rather than the entire 
object. So let's imagine, for the purposes of this 
example, that a method on your class references a 
custom global function Gasp) to fetch a value from a 
configuration file. 


<?php 
class MyClass { 
{ ? 
return config($option); 


3 
public function fire() 
{ 
$timeout = $this- 
>getOption(‘timeout’); 
// do something with $timeout 


— 


$ 


say 


While there are a few different techniques for mocking 
global functions, nonetheless, it's best to avoid this 
method call altogether. This is precisely when partial 
mocks come into play. 


SS’ php 
public function testPartialMockExample() 
{ 
$mock = Mockery: :mock(‘MyClass[getOptio 
A )5 
$mock->shouldReceive(‘getOption’ ) 
~>once() 
->andReturn( 10000) ; 
$mock->fire(); 


yee 


Notice how we've placed the method to mock within 
brackets. Should you have multiple methods, simply 
separate them by a comma, like So: 


“php 
$mock = Mockery: :mock( ‘MyClass[method1 , 
method2]’); 


rar 


With this technique, the remainder of the methods on 
the object will trigger and behave as they normally 
would. Try to keep in mind that you must always 
declare the behaviour of your mocked methods, as we 
have done above. In this case, when ‘getOption’ is 
called, rather than executing the code within it, we 
simply return ‘10000’. 

An alternative option is to make use of passive partial 
mocks, which you can think of as setting a default state 
for the mock object: all methods defer to the main 


parent class, unless an expectation is specified. So the 
previous code snippet may be rewritten as: 


“php 
public function testPassiveMockExample() 
{ 
$mock = Mockery: :mock( ‘MyClass’ )- 
>makePartial() ; 
$mock->shouldReceive(‘getOption’) 
~ponce() 
->andReturn (10000) ; 
$mock->fire() ; 


In this example, all methods on ‘MyClass’ will behave as 
they normally would, excluding ‘getOption’, which will 
be mocked and return '10000'. 


HAMCREST 


Once you've familiarised yourself with the Mockery API, 
it's recommended that you also leverage the Hamcrest 
library, which provides an additional set of matchers for 
defining readable expectations. Like Mockery, it may be 
installed through Composer. 


ae 


js 
“require-dev”: { 
“mockery/mockery”: “dev-master”, 
“davedevelopment/hamcrest-php”: “dev- 
master” 


oe 


Once installed, you may use a more human-readable 
notation to define your tests. Below are a few examples, 
including slight variations, that achieve the same result. 


***php 

<?php 

class HamCrestTest extends PHPUnit_ 
Framework_ TestCase { 
public function testHamcrestMatchers() 
{ 
$name = ‘Jeffrey’; 
$age = 28; 
$hobbies = [‘coding’, ‘guitar’, 


‘chess’; 
assertThat ($name, is(‘Jeffrey’)); 
assertThat ($name, is(not(‘Joe’))); 
assertThat($age, is(greaterThan(20))); 
assertThat($age, greaterThan(20)); 
assertThat($age, is(integerValue())); 
assertThat(new Foo, 

is(anInstanceOf (‘Foo’))); 
assertThat($hobbies, is(arrayValue())); 

E assertThat($hobbies, arrayValue()); 

a assertThat($hobbies, hasKey(‘coding’)); 
} 


wv ADVOe 


expressions of intent 


Hamcrest 


Matchers that can be combined to create flexible 


Born in Java, Hamcrest now has implementations in a number of languages. 


The Hamcrest library provides an additional set of matchers for defining expectations 


} 


ves 


Notice how Hamcrest allows you to write your 
assertions in as readable or terse a way as you desire. 
The use of the ‘is(’ function is nothing more than 
syntactic sugar to aid in readability. 
You will find that Mockery blends quite nicely with 
Hamcrest as you work. For instance, with Mockery 
alone, in order to specify that a mocked method should 
be called with a single argument of type, ‘string’, you 
might write this code: 
‘php 

$mock->shouldRecei ve (‘method’) 
->with(Mockery: : type(‘string’)) 
->once(); 


If using Hamcrest, ‘Mockery: type' may be replaced with 
‘stringValueO’ like so: 


***php 

$mock->shouldReceive( ‘method’ ) 
3 ->with(stringValue()) 
=>once(); 


Hamcrest follows the resource value naming 
convention for matching the type of a value. 
- nullValue 
- integerValue 
- arrayValue 
- rinse and repeat 


Alternatively, to match any argument, ‘Mockery:any(0’ 
may become ‘anything(. 


***php 

$file->shouldReceive(‘put’) 
->with(‘foo. txt’, anything()) 
~ponce() 


vey 


SUMMARY 


The biggest hurdle to using Mockery is, ironically, not 
the API itself, but understanding why and when to use 
mocks in your testing. 

The key to overcoming this is to learn and respect 
the single responsibility principle (SRP) in your coding 
workflow, Coined by Bob Martin, the SRP dictates that a 
class “should have one, and only one, reason to 
change.” In other words, a class shouldn't need to be 
updated in response to multiple, unrelated changes to 
your application, such as modifying business logic, or 
how output is formatted, or how data may be persisted 
In its simplest form, just like a method, a class should do 
one thing. 

The ‘File’ class manages file system interactions. A 
‘MysqlDb' repository persists data, An ‘Email’ class 
prepares and sends emails. You might find it rather 
useful to notice how, in none of these examples the 
word ‘and’ was used. 

Once this is understood, you will find that testing 
becomes considerably easier. Dependency injection 
should be used for all operations that do not fall under 
the class ‘umbrella’. When testing, make sure you focus 
on one class at a time, and mock all of its 
dependencies. You're not Interested in testing them 
anyway; they have their own tests! 

Though nothing prevents you from making use of 
PHPUnit's native mocking implementation, why bother 
when Mockery’s improved readability is only a 
‘composer update’ away? 
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Get to the top of | 


Google 


There is no quick-fix solution, but the right ingredients, 
some common sense and a little hard work can make 
all the difference to boosting your ranking 


When you've completed your website and unleashed it on the world, your mind 
will naturally turn to how to drive traffic to your masterpiece. It can be extremely 
frustrating to spend weeks or months carefully building a site, only to find that your 
hits are in the hundreds rather than the hundreds of thousands. You can buy traffic 
with the likes of AdWords, but this can get expensive very quickly - and only works for 
as long as you keep paying out. In order to build sustainable traffic, you need to ensure 
that your website appears high up in search engine results. 

Getting to the top of Google or Bing for a given search term clearly can make a 
huge difference to the amount of traffic your website receives. The problem is that 
if you only start to consider how to get your traffic once the site build is complete, 
you're missing a huge opportunity to bake in a search-engine-friendly structure. This 
structure is essential to achieving the coveted number one spot, and provides a firm 
foundation for your ongoing search engine optimisation (SEO) efforts. 

In this feature we're going to discuss what steps you can take to help your website 
reach the top of the search engines. There are three principal pillars that will help 
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support you: structure, content and promotion, which we'll consider both individually 
and collectively, Crucially, SEO is something that you should consider at every stage 
of your website build; if you only start to think about it once the site is made. you've 
already missed several essential elements of a search-optimised approach, and your 
website's search engine performance will naturally suffer as a result. 

Over the following pages we'll cover these three main areas in detail; each pillar will 
act as a cornerstone to underpin your online portal to the world. We'll show you how 
to avoid a few common pitfalls that will spell disaster for your website's ranking, and 
ensure that you're making the most of your keywords and Phrases. Once you have 
got all the right elements in place, you will find yourself in a much stronger position to 
leverage your website up the rankings effectively. 

We're not going to deceive you: there is no miracle solution for getting to the top 
of Google - indeed, it will be a mighty hard slog - but by using a methodical approach 
and ensuring you've got the little details covered, you will get your website right up 
there given time and pull in the high number of visitors vital for SUCCESS. 


GETTING YOUR 
STRUCTURE RIGHT 


It would be an understatement to say that web design 
has come a long way since the earliest websites. It used 
to be common to see layouts that, when you look at the 
code, relied on tables for layout and inline markup to 
provide visual emphasis to important areas of content. 
These days we all use <div>s to arrange our content and 
designers are increasingly moving towards the more 
semantic markup offered by HTMLS5. 

This semantic, structural approach to arranging 
content is an important first step to ensuring your 
website performs well in the major search engines, but 
it's well worth looking at why this is the case, What 
specific advantages does a well-structured HTML 
document offer us in terms of search engine 
optimisation and performance? 


A GOOD WEBSITE IS 
LIKE A RECIPE BOOK... 


The easiest way to explain why a well-defined structure 
is important is to use a metaphor. Imagine that you're 
looking for a recipe to cook lasagne for a dinner party. If 
you've got a dozen cookbooks in front of you, the first 


thing you're going to look at are the titles, One called 
100 Delicious Desserts isn't very likely to contain the 
lasagne recipe youre looking for, right? 

Once you've located a book that contains main- 
course recipes, you'll then need to look in the contents 
to pinpoint the section that deals with meat recipes 
(assuming the book is arranged by principal ingredient), 
allowing you to quickly skip to that part of the book. 
Finally, you'll be able to look in this section for the 
specific page that deals with lasagne. 

To take the metaphor to its natural conclusion, once 
you've found the recipe, it’s vital that you're able to 
understand it. This means that the name of the recipe 
should be clearly identified, the ingredients presented in 
an easy-to-grasp way, the method highlighted and laid 
out in the right order, and so on. 

By following the process of finding a recipe, we've 
illustrated the importance of using a clearly defined 
structure to underpin website content. If all the recipes 
in a book were jumbled together in no order, we'd never 
know where to look to find a particular one. 

Similarly, if the book wasn't given a title that described 
its contents in general, we wouldn't know to even look in 
that particular tome in the first place. It will come as no 
surprise, then, to learn that digital websites benefit from 
structure in exactly the same way as physical books. 


By using a clearly defined structure in our 
websites overall, as well as on individual pages that 
make up the website, we're providing effective 
signposts to both visitors and search engines. 


WHAT'S SEMANTIC 
ABOUT IT? 


The word semantic relates to ‘meaning in language or 
logic’. In lay terms, semantics helps us define what we're 
talking about. In website terms, the idea of a semantic 
structure is to provide a definition of the content we're 
marking up. So, for example, by choosing the right 
structural elements for a book's title, we can help 
explain that the content within is a book's title. Often, we 
can do this without having to be as blatant as ‘Book's 
title: 30 Superb Meat Recipes’ 

HTML has long had semantic tags that help to define 
what type of content is being presented: <hl>, <p>, <ul>, 
<li> and <img> are all semantic elements that should, in 
theory, tell us what type of content to expect within 
them. For example, heading 1 (<hl>) tags are the 
principal title of a piece of content or page (such as the 
name of the recipe), while paragraph tags (<p>) provide 
the nuts and bolts of the content itself - much like one 
step within the recipe’s overall method, 
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Semantics in HTML 5 


by JOHN ALLSOPP - January 06, 2009 
Published in Browsers, HTML « 108 Comments 


I’m going to make a bold prediction. Long after you and I are gone, HTML will still be 
around. Not just in billions of archived pages from our era, but as a living, breathing 
entity. Too much effort, energy, and investment has gone into developing the web’s tools, 
protocols, and platforms for it to be abandoned lightly, if indeed at all. 


Let's stop to consider our responsibility. By an accident of history, we are associated 
with the development of an important tool our civilization will use to communicate for 
decades to come, So, when we turn our minds, idly or in earnest, to improving HTML, 
we must understand just how far-reaching the ramifications of today’s decisions may be. 


HTML 5, the W3C's recently redoubled effort to shape the next generation of HTML, 
has, over the last year or so, taken on considerable momentum, It is an enormous 
project, covering not simply the structure of HTML, but also parsing models, error- 
handling models, the DOM, algorithms for resource fetching, media content, 2D 
drawing, data templating, security models, page loading models, client-side data 


A List Apart has an excellent article discussing the benefits of semantics in HTML5 
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The W3C's validation services help you check that your 
structural elements are all valid and correct 


HTML has long had 
semantic tags that 
help to define what content 
is being presented: <hb, 
<p>, <ub, <li> and <img> are 
allelements that should tell 
us what type of 
content to expect 
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USING SEMANTIC 
ELEMENTS 


It's not uncommon to see web designs where different 
tags are used purely for their inherent visual attributes. 
For example, <hl> tags might be employed to make a 
piece of text big and bold, rather than because the 
content within the tag is actually the main heading on 
the page - or what may visually appear to be a heading 
might actually be standard paragraph text that has had 
a <strong> tag wrapped around it. 

This visual-first approach, however, misses all the 
benefits of a semantic structure where the content is 
defined by the structure, As a consequence the search 
engines will have a hard time understanding how to 
break down the content on your website. 

Instead, it pays dividends to carefully consider the 
structure of your pages (as well as the website overall), 
so that the most important piece of content on a page is 
marked up with that <hl>, the second most important 
with an <h2> and so on. There's a set of pliable rules that 
SEO experts use to define the ideal number of particular 
heading tags on a page, and these rules will vary slightly 
depending upon who you talk to, but as a general rule 
stick to one heading 1 per page, and aim for no more 
than four heading 2 tags, nine heading 3 tags and so on. 
If you need to emphasise particular bits of content, 
make use of CSS to provide visual distinction. 


HTML5 AND NEW 
SEMANTIC ELEMENTS 


With the introduction of HTML5, web designers have a 
new arsenal of semantic structural elements they can 


WHAT DOES 
A SEMANTIC 
STRUCTURE 
LOOK LIKE? 


Creating a semantic structure for your website 
sounds complicated, but in reality you’re probably 
already doing it, as we show you here... 


1. Define your principal content 
The first thing you should do when creating the 


structure for your webpage is to define the high- 
level content areas. For example, you might be 
working on a page that has a main content area, a 
sidebar, a navigation bar, a footer and a header. Map 
these out in sketch code form, like this: 


<header> 


call on to build an effective structure. Tags such as 
<article>, <section>, <nav>, <header>, <footer> and 
<aside> all provide a self-describing idea of what will be 
found within, and help the search engines understand 
the relative importance of different bits of your content. 
The <aside> tag is especially useful as it enables you to 
define an area of content that, although related, isn't 
strictly a part of the main subject matter. 

All these tags, as well as providing the necessary 
structural elements allowing you to style the layout of a 
page, give useful signposts to the search engines. When 
you have a coherent whole, Google et al can quickly 
establish the overall subject matter of a website or page, 
but also index the detailed content. 

There are additional benefits to using a fully semantic 
structure, not least that by compartmentalising content 
and defining it clearly, you can subtly shift the emphasis 
on different parts of your site. This enables you to 
establish your website as an authority on a particular 
subject, which in turn leads to improved search engine 
rankings for terms around a specific topic. 


AFEW COMMON 
PITFALLS TO AVOID 


Even with the best structure in the world, you can still 
have a less-than-optimised website if you don't get all 
the details right. Common mistakes that are easily 
avoidable include invalidly nested code, missing <title> 
and <meta> tags and, perhaps most crucially of all, the 
cardinal sin of broken links. 

Focusing on the details will help ensure that your 
webpages are fully search friendly, and you don't need 
to manually check every file to do it. Services such as 


<content> 
<main content> 
<sidebar> 


</content> 
<footer> 


2. Convert your sketch 
You've currently got a semantic layout for your 


"re going to convert this to 
HTML tags insi 
started with. Conveniently, in the vast majority of 


d of the sketch code we 


cases, when using the new HTMLS tags, you're likely 
to find that the sketch code will be perfectly valid 
HTML - so this step is generally a cinch! 


<header> 


the W3C’s HTML validation tool can quickly tell you if 
your code is invalidly nested, While a link-checking 
resource such as www.brokenlinkcheck.com will 
highlight any broken links on your site, making it easy to 
remedy these basic but costly errors. 

Another simple but effective way to check that your 
structure is sound is to load your webpage without the 
stylesheet. If your content continues to make sense - 
even when all visual styles have been removed - you 
know that you're well on the way towards having a 
search-engine-friendly website which is going to work 
for you, rather than against you. 


‘Online Broken Link Checker 
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Finding and fixing link problems has 
finally been made easy! 


Why having broken weblinks is so bad? 
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Quickly locate and fix any dodgy links with a handy tool such as 
Broken Link Check (www.brokenlinkcheck.com) 


3. Work in your content 

Now you've got the proper HTML structure, you 
can apply the same methodology to the content. As 
before, take a sketch semantic approach first, then 
fill in your content using the appropriate tags to 


ensure the structure is semantically sound. 


<header> 
<a href="/”>Return to the homepage</a> 
</header> 
<nav> 
5 <ul> 
Navigation items in here 
</ul> 
</nav> 
<section> 


<nav> 


<article><header><h1>Main title 


<section> 


of article</h1></header><p>Content..</p></ 


<article> 


article> 


<aside> 


<aside>Contents of sidebar</aside> 


</section> 


2 </section> 


<nav> 
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<footer> 


<footer>. .</footer> 


TING YOUR 
TENT RIGHT 


Once you have a sound structure in place, it's time to 
focus on the content. While structure is the glue that 


holds a site together, content is the goodness that we 
visit for - it's the reason the website exists. 


with the keywords rather than using an abstract naming 


convention. That is, /health-benefits-of-rhubarb/ will 
perform more effectively than, say, /page22/. 

You also need to include your principal keywords in 
the title of the page, and the meta description and 
keyword tags. There remains some debate over the 
latter two tags, but it's almost certainly the case that it 


TOP TIPS FOR 
GENERATING 
EBPPEC TIVE 


KEYWORDS & 
METADATA 


doesn't hurt to include meta tags, even if search engines 
no longer rely on these for primary indexing algorithms. 
Once you've dealt with all the meta content, it’s time 
to look at the actual readable content. Within your 
semantic structure, you should include your primary 
keywords and/or phrases within the heading tags, 
although you should take care to avoid doing so ina 
contrived way that will only annoy visitors. If you've got 
an article about how to bake a rhubarb pie, a good title 
for your <hl> might be ‘How to bake a healthy rhubarb 
pie’ As well as the main heading for the page, you 
should aim to add keywords in subheadings and body 
content. Be careful not to overdo it though: paragraph 
after paragraph extolling the healthiness of rhubarb will 


Getting your content right might sound obvious, but 
there are intricacies in the way you write and present 
your content that can have a big impact on a site's 
performance in the search engines. 

Everyone has heard of keywords and phrases - 
words and sentences that we hope searchers will use to 
find our website - but understanding how and where to 


Coming up with the right set of keywords and 
metadata for both your website in general - 
use these is essential to getting to the top. and for particular pages - is a crucial skill you 
Keywords need to be spread out over different need to master for SEO success... 
hierarchical levels of content in your semantic structure 
to ensure the search engines understand your page is 
about the subject in question, and that you are credible. 
This should happen organically, as part of the process of 


writing, but by being aware of the need to include your 


Picking keywords that repre: ntent 
sounds like it should be reall y. but there's a 
bit of an art to it. First of all, you need to clearly 


identify your target ¿ ence. These are the 


primary keywords for a particular page across these 
levels, you can write smart content that gives the visitor 
the information they came for, but at the same time 
helps them find your website in the first place. 

For example, if you're creating a website about the 
health benefits of rhubarb, you might identify ‘rhubarb’ 


quickly bore visitors, and might even lead to your site 
being flagged as spam. 


Of course, on a typical website you'll have more than 


just two keywords, and it’s far more likely that your 
website will be about the health benefits of many 
different fruit and vegetables rather than just one. This 


typical people that your website will be oriented 
towards and ised upon. 
Once you've established who you're pl. 
to appeal towards, you can put together < 
words and phrases that you'think your audience 


would search for when looking for your content 


and ‘health’ as two of your primary keywords. A good 
way to start is by choosing a domain name that includes 
both words. In addition, if you have a page that's 
particularly about rhubarb and health, name the page 


means that you need to ensure that your keywords are 
divided across different pages to accurately reflect what 
each page is about, while simultaneously continuing to 

reflect the overall theme of your website. 


It's important to be creative - don’t exclude any 
options at this point 

When you've got a page full of potential 
phrases and keywords, narrow down your list 
to three or four prir 


y words and expressions 


that most accurately reflect the content. It 


Aware of the need to include primary keywords 
across these levels you can write smart content 
that gives the visitor the information they came 
for, but helps them find your site in the first place 


th using an online tool at tt 


to check that the keywords you've chosen 


aren't low volume (ie attract a low number of 


searches). Google’s AdWords Keyword Tool 


(https://adwords.google.com/o/KeywordToo!) 


offers both a set of suggestions for keyv 
TO Broad Algonitm r nanye _— — — aR and rough traffic levels for each 
Finally, using these keywords you need to 

generate your metadata, such as the page 
3 grannies cera IT title, meta description, meta keywords and, of 
= Kaminai es course, the page content itself. Take care not 
- AONAR T to oversaturate your content with keywords 
ax A TAN | though; this can do as much harm as good. 
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Introducing Moz Analytics beta. 


— Introducing Moz Analytics beta 
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Content is one of the most important factors in achieving a high y diffe 


position in the search engines (data courtesy of SEOMoz) 


'www.seomoz.org has a series of useful articles on writing effective 
content for your website that will help attract more visitors 
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For example, if you had another page detailing the 
benefits of the blueberry, you might focus on keywords 
around antioxidants, vitamin C, blueberries and so on. 
You would also want to include some keywords about 
health and vegetables in general terms. This page is 
then identified by the search engines as being 
specifically about blueberries, while the rhubarb page is 
obviously about rhubarb. This is, of course, important 
when a visitor arrives at your site, but it means they'll 
find themselves at the content appropriate to their 
search from the moment they arrive, and also allows 
you to avoid duplication of keywords and meta tags. 


DON'T DUPLICATE 


This leads us on to an important point, which is that 
your website needs to contain unique content to 
achieve the best position in the search engines. Not only 
should the content be fresh and engaging, but each 
page also needs to be unique within your site. Google 
and other search engines will actively penalise a site if 
their algorithm thinks the content is an attempt to 
artificially score highly in the rankings, so keep content 
specific and tailored to the subject at hand, and make 
sure you update each page regularly. 

Similarly, avoid copying content from elsewhere on 
the web. As well as being potentially illegal (ie 
plagiarism), it's also not going to help you achieve a 
good search engine listing. It's always better to spend 
the time writing original, interesting and fresh content 
that will offer something new to the world. 


UPDATE FREQUENTLY 
One of the most important defining characteristics of a 
website that successfully gets to the top of the search 


engines - and stays there - is the freshness of the 
content. This means regularly updating your content to 
reflect the subject matter. Obviously if you've got an 
archive page about World War Two, it might be difficult 
to retell a story in a new way every couple of weeks, 
however the general principle is valid; the more 
frequently you update your content, the more often 
search engines will have to index your site, resulting in 
more up-to-date and effective listings. 

Blogs are a great vehicle for this, and indeed one of 
the reasons WordPress has become such a popular 
content management system is this ability to push new 
content onto a website with ease. 


CONSIDER HOW YOUR 
CONTENT LOADS 


One final major consideration for the way you construct 
your content is how that material is loaded into the 
browser. Images that include words, for example, will not 
result in those words being searchable. This is less of an 
issue now that the web has several options for including 
rich fonts within page designs, but a surprising number 
of designers continue to render text as a graphic. 
Similarly, some pages rely on JavaScript to load 
content into the page once the page has rendered in 
the browser. This is fine for usability (assuming the 
content remains accessible to users with JavaScript 
turned off), but not all search engines will be able to 
parse content that's loaded dynamically, so consider 
carefully how any content loaded in this way will be 
reflected in your search engine results. If you're in any 
doubt, include the content directly in the page rather 
than loading it on demand with JavaScript. This may 
slow down your page, which can in turn affect your 


ranking, but it's often a trade-off that's worth making if it 
results in the search engines recognising the content of 
your page more effectively. 


PICTURES SPEAK A 
THOUSAND WORDS 


While it’s not a good idea to render words as images, it’s 
well known that many visitors use search engines to find 
images on a particular subject. For this reason, it’s a 
good idea to name your images according to the 
content they contain - in the same way that you've 
named your HTML pages to represent the content 

This will help them appear high in the search engine 
image results, and might bring you extra visitors in 
general. If you're concerned about image theft, you can 
always embed copyright information in the image files 


or watermark them for your peace of mind. 


Google Image Search offers another way for visitors to 
find your site so don’t miss the opportunity to flag them 


HOW IS YOUR WEBSITE PERFORMING? 


It’s important to regularly check how your site is performing and 


make adjustments to your keywords to reflect changes 


Choosing the right keywords is just the firs 


stage in ensuring you continue to appear high 


up in search results. It's equally important that you conduct a regular, ongoing review, as this 


will enable you to identify which keywords are performing well and which are not working so 


well. An ideal tool to help you conduct this analysis is Goo 


‘word-bi 


Once you're armed with this valuable know! 


le Analytics, which can generate 


d reports to show which ones are bringing in the most traffic 


edge, you really do need to be ruthless and 


get shot of keywords that aren't pulling their weight - unless you know that these are high 


volume, in which case you should instead re 


unique. fre 


w your content to ensure that 


ou're offering 


and relevant material related to that keyword. 


Google Analytics 


Enterprise-class web analytics. 


If you have a particular keyword that you want to focus on, which isn’t currently performing 
well - and you're confident your content covers - you might need to be a little more aggressive 
with the way that you're positioning the keyword in your content. As a general rule of thumb 


itsa rd at every hierarchical level of your content - that is, 


idea to have a specific key 
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Having worked through developing an effective 
structure and getting your content right, you'll be ready 
to start promoting your website. This is a crucial stage of 
the journey to the top of the search engines, and builds 
upon all the hard work you've put in up to this point 

The art of promotion is a complex one to master, but 
there are several key strategies you can employ to help 
get the word out about your website and encourage 
new visitors to give it a chance. One of the most basic 
ways of doing this is to let the search engines know 
about your site in the first place. 


As part of its comprehensive suite of webmaster tools, 
Google allows you to upload an XML sitemap that is 
designed to inform Google about the content and 
pages within your website, along with the relative 
importance that you (as the webmaster) place on each 
page. This is useful because it enables you to alert 
Google to new content and also place emphasis on the 
most important content at any given time. 

This isn't a one-off operation though - ideally you 
should generate a fresh sitemap and resubmit it to 
Google each time you make a change. By doing so 
frequently, you're directly telling the search engine giant 
that you've got new content and that your website 
remains live, valid and actively edited. 


One of the most common tricks employed by less 
scrupulous search engine optimisation businesses is to 
build a network of inbound links to your website. The 


It’s essential to find like-minded webmasters to build your links; random affiliations are next to worthless 


idea is allegedly that if you have lots of links pointing in 
towards your website, then the search engines will 
consider your content to be verified and validated by 
these sites. After all, if your content isn't any good, then 
why would they be linking to it? 

The problem with generating links en masse in this 
fashion is that this dilutes the value of such links, 
Additionally, search engines are getting ever wiser to 
this trick, so they will only truly value links that originate 
from both a trusted website, and one which has 
authority in the subject area. For example, if you're 
running a website about how to fix a particular model of 
Car, a link from a spare parts manufacturer to your 
website will benefit your search engine ranking. A link 
from a website that's all about hairdressing is far less 
likely to provide any material benefit - because the 
subjects are so blatantly unrelated. 

For this reason, a slow-but-steady approach to 
building up your links by engaging directly with other 
websites that cover related subjects is generally the 
most effective route to take. Often you can add value to 
your visitors’ experience by providing a link to a website 
that offers related information, and by encouraging 
these sites to do the same for you, you will mutually 
benefit from the association. 


As we've already mentioned, links can do as much harm 
as they can good. The secret is to only build 
relationships with websites that offer authority in your 
subject area or similar ideas. Getting the entire world to 
link to your site won't help you appear higher in the 
results for your chosen keywords, so make sure you're 
very selective and deliberate in how you approach links 
and reciprocal agreements. 

It's well worth periodically reviewing your links and 
inbound links, and removing any that are no longer 
editorially sound - especially if a website you link to has 
changed its content or subject area. 
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THE BE! 
PROMOTIO! 
TOCES 4550) 
ANALYSIS 
RESOURCES 
ON THE WEB 


There are hundreds of tools available online 
that offer to help promote your site and 
improve its search engine optimisation. We 


round up a few of our favourites below. 


Run a search for ‘SEO tool’ on any search engine 
and you'll be swamped with options, making it 
difficult to discern which tool is right for 
you. Thankfully there are e tools that offer 
bit more than the average - and often they're 
totally free of charge. Regardless of what 
ystem you're using to power your website 
there are resources available to help you 


EO opportunities and 


DULT 


Allin One SEO Pack 


Google XML Sitemaps 
Plugin for WordPress 


nrelate Related Content 


SEO Doctor 


SEO 
£) 


Microsoft Free 
SEO Toolkit 
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BE SOCIABLE 


Increasingly the web is becoming social, so that 
personal recommendation is as important as achieving 
a high position in the search engines, but it's also true 
that by getting a lot of social activity on your website, 
you can help bump up your ranking. 

As with anything else online - especially when it 
comes to social networks - content is key. Build an 
effective following of users for your website by creating 
an account for Facebook, Twitter and Pinterest, etc 
- specifically for your site - and posting links to content 
on your website from each of the networks. Ideally you 
should aim to post unique messages on each platform, 
and relate your content to current affairs. 

For example, if you're running a website that's all 
about apparel materials and dressmaking, it would make 
sense to relate your content to a news story about 
innovative materials in London Fashion Week, This 
approach is more effective for some subjects than 
others, but can help lend freshness to your content - 
even if you haven't updated your site. 

You can also embed social media streams on your 
site to help provide a sense of real-time content, and to 
act as a secondary point of navigation to current or new 
articles. These internal links are noticed by search 
engines, showing them fresh content not yet picked up 
as part of your sitemap submissions. 


GET USERS INVOLVED 


As well as initiating content yourself. you should also 
encourage your visitors to share content directly by 
embedding social media sharing tools directly inside 
your pages. Tools such as AddThis make it easy to 
create a customised set of sharing tools for your pages, 


and also offer the ability to share content via email 
Another good way to create fresh content on your site is 
to encourage your visitors to comment on your articles 
and pages. This is a great way to engage with your 
readership and will increase the likelihood that visitors 
will recommend your site or link to it. 

Although moderating comments to avoid the 
inevitable spam can seem like a lot of work, generating 
discussion and feedback can really enhance a website's 
content, leading to better search engine results. Once 
again, blogging software provides a great platform upon 
which to build a website that accepts comments. 


KEEP UP TO DATE 

A favourite trick to encourage repeat visits, 
recommendations and website loyalty is the humble 
email newsletter. Although it's not immediately obvious 
what part this might play in an effective SEO strategy, it 
does allow you to engage with your readers in a new 
way. It’s not clear whether the likes of Gmail use links 
found within emails to help improve search results, but 
what is most definitely a fact is that engaged readers are 
more likely to share your website, and if you use a 
third-party platform such as MailChimp or Constant 
Contact, you can also host a web-visible copy of your 
email newsletters on their servers. 


THE RIGHT BALANCE 

It's important not to drown your readers with messages. 
There's a fine line between sharing cutting-edge news 
and bombarding them with information, Daily 
newsletters might work for a website that covers current 
affairs like politics, but less so for, say, a baking site. The 
same is true for tweets and wall posts; think less is more. 


THREE COMMON 
MYTHS BUSTED 


There are a lot of articles, websites, tools and self- 
proclaimed experts on the web offering up advice on 
how to optimise your website for the best possible 
search engine performance. 

Unfortunately, this also means that a few persistent 
myths have arisen over time. Some of these were once 
based in fact, but as engine algorithms have changed, 
they've grown outdated. Check out a few of the major 
misconceptions below, and steer clear of any website or 
‘expert’ who leads with these. 


PAYING FOR ADVERTS 
HELPS YOUR ORGANIC 
LISTING RESULTS 


This is by far and away the most common myth, and 
the idea continues to perpetuate despite the fact that 
there is no real evidence to support it. Spending money 


on Google AdWords, or any similar search engine 
advertising schemes, will in no way affect or improve 
your organic search engine listings. All of the major 
search engines have distinct divisions between their 
search and paid-search departments in order to avoid 
any such crossover, so make sure that you don't throw 
away your hard-earned money on adverts simply 
because you think it will help with your regular search 
listings - because it won't. 

Keyword stuffing and density are the key to success 
here. The idea behind this approach to SEO is that by 
achieving a certain mathematical density of your 
keywords proportional to your content, you will thus 
improve your ranking and relevancy scores. While it's 
true to say that using appropriate keywords in a natural 
way, at multiple hierarchical levels within your page 
content, will help your SEO, it's not the case that 
achieving a four per cent density, six per cent density or 
two per cent density will improve your results. In fact. if 
you ‘over-stuff’ your keywords into your content, you're 
actually more at risk of being reported for spam than 
anything else, so this is to be avoided. 


YOU MUST SUBMIT A 
SITE TO THE SEARCH 
ENGINES BEFORE 
YOU'LL BE INDEXED 


Again, this myth is based on an outdated approach to 
SEO. In the distant past, search engines all had 
submission forms through which a webmaster could 
inform the engine of their site's existence. Not long after 
the website was submitted, a search engine spider 
would come along and index it. 

These days, however, there are just too many 
websites being generated on a daily basis for this 
approach to hold value. Instead, spiders discover 
websites via links from other sites they already know 


about. It is true to say that there's value in using tools 
such as Google's XML sitemap submission, as this allows 
you to place emphasis on particular areas of your site, 
but you won't speed up the indexing of your website by 
submitting it via a form to the search engines. This is a 
favourite promise of less scrupulous 'SEO experts’ they'll 
offer to submit your site to thousands of search engines. 
Avoid falling for the lie! 


THE MORE LINKS YOU 
HAVE MAKES FORA 
BETTER RANKING 


This particular myth is especially dangerous because an 


element of it is based in fact. It's true to say that where 
you have high-quality inbound links coming from 


respected sources related to your own content 
specialism, these will significantly boost your search 
engine optimisation efforts. 

What's not true at all, however, is the idea that the 
more links you get, the better your ranking will become. 
Links that have no relation to your content whatsoever 
offer it no benefit at all, and as a result any service that 
promises to generate hundreds or thousands of links to 
your site automatically is a waste of time and money. It's 
far better to focus on getting a few good-quality links 
over time than many low-quality ones in a hurry. 


site offer it no benefit 


TAKE AN 
INTEGRATED 
APPROACH TO 
REACH HIN THE 
SEO CHARTS 


Over this feature we have looked at three core pillars 
that can help support your website and provide a solid 
foundation to help you get to the top of Google's - or 
any other search engine's - result pages. It's important 
to keep in mind that it's not only Google you need to be 
optimising for, and that although there's value in each of 
the pillars in isolation, to truly benefit from the approach 
you need to use the trio in combination. To summarise 
here are the few key elements from each section. Make 


sure you focus equally on the following. This will ensure 
that your chances of getting ranked higher will improve. 


STRUCTURE 

- Use a clearly defined, semantic structure 

- If possible, use appropriate markup for the content 
- Avoid invalid markup, and check for broken links 


CONTENT 
- Keep your content fresh, relevant and unique to keep 
the visitors coming back for more 

Ensure that you are using keywords and phrases that 
reflect your content - in both topicality and tone 
- Update content frequently, and be specific 


PROMOTION 
- Generate an XML sitemap and then submit it to the 


FINAL TIPS FOR MASTERING SEO 


1. TRY TO BE UNIQUE 
WHEREVER POSSIBLE 
It’s important to differentiate yourself from all the 
other competition providing similar information 


nd the 
to-dat 


easiest way to do this is to offer more up- 
, better-researched and engaging content. If 
you do this, your website will become instantly more 


attractive to search engines and visitors alike! 


Guaranteed 
Page Rank 


2. SUB 
agr 

SITEN 

It's important to let a search engine know if you 

change your website's structure; this is especially 

the 


anew sitemap each time you rr 


case if you've removed pages. By generating 
ke a structural or 
substantial content change, you're letting Google et 


al know it’s time to spider your site again 


Webmaster Tools 
Improve your site's visibility in Google search results. It's 


Google Webmaster Tools provides you with detailed reports about your} 
started, simply add and verify your site and you'll start to see informatiq 


Get Google's view of your site and diagnose problems 
See how Google crawls and indexes your site and leam abd 
By uploading a Google XML sitemap 
the search engine t e 


search engines to put you on the map 

- Engage with your visitors on social media platforms 

- Build reciprocal links with websites and webmasters 
that have related and high-quality content 

- Encourage comments and social sharing on your site 
to help build a buzz around the content 


The continuing success of your website's search engine 
performance will depend upon taking a fully integrated 
approach to search engine optimisation - all the 
promotion in the world won't be enough to sustain a 
high ranking if you don't have the content and structure 
to support it. While, unfortunately, we can’t guarantee 
you'll get to the very top position, this tried-and-tested 
approach does work and, with some patience and 
ongoing work, you'll be right up there with the best of 
them in no time. 
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Ways to Make 
Users Clic 


Discover the essential techniques tN 


satisfy, engage and meet an end- 
users’ online needs 


ou can't force anyone to click, or do 
anything they don’t want to do on the 
internet. So how do you encourage 
people who are visiting your website to 
do what you want them to? 

The answer is to use websites to 
engage in conversations with their 
users, just as a business would witha 

potential customer face-to-face. In person, they'd be 
polite, trustworthy, expert, answer questions (perhaps 
even before they'd been asked) and show off the 
business's benefits over its competitors. In short: make 
the customer feel relaxed and in good hands. 


You can anticipate the conversations a business 
would like to have with its customers and design the 
website to reflect that. Whether the business wants to 
make an online sale, provide information online before 
an offline sale takes place or simply provide information 
per se - a website that answers its users’ questions will 
stand any business in good stead. 

The practice of UCD (user-centred design) means 
considering a website's end-users at every stage of the 
design process. As a designer, it is your job to balance 
the needs of clients with those of their users. The 
user-centred design techniques help you and clients 
understand what their customers want and need. 
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Understand what you want 
users to do 

It sounds obvious, but if you don’t know what you want 
your users to do, how can you possibly design an 
online experience that encourages that behaviour? The 
business goals for the website and any given webpage 
are key. Goals provide a clear understanding of what 
the page is for and what the desired user actions are. 

If a business or organisation wants a new or 
improved website, there will always be a reason behind 
it. Some businesses will have a list of goals or KPIs (key 
performance indicators) for its new website, Others will 
be less explicit. If you understand its reasons, you can 
design to meet its goals. 

Eliciting business goals is often a case of simply 
asking. It's something that’s easy to forget, especially 
when you're caught up in the thrill of a new design 
project. For that reason, it can help to have a more 
formal approach to drawing out the information and 
documenting it. When starting a new project, the first 
step is to conduct stakeholder interviews, asking people 
in the business with an interest in the website a series of 
questions. Typically one of the most useful ones is ‘what 
will make this redesign successful for you?’ Answers can 
range from 'a five per cent uplift in conversion rates’ to 
‘a website that isn't embarrassing, but they are always 
helpful in shaping the design work ahead. 

At the level of individual pages, it's hugely useful to 
discuss business goals. It gives focus to the design work 
and provides a framework for critique of proposed 
designs. Does the design meet the business goals set 
for the page? 

Consider documenting the page goals as part of the 
design process, perhaps as annotations to wireframes 
or alongside early sketches or content lists. 

Understanding the goals of a webpage has the 
added benefit of allowing you to set up analytics to 
measure the outcome of your design choices. 


Understand what the users 
want to do 

Considering likely user goals for any given webpage 
before you start design work is hugely important. It is 
always interesting to compare user goals with business 
goals. Are there any tensions there, and how can they 
be addressed? It is very difficult to encourage users to 
click in an environment that makes them feel 
uncomfortable or over-sold-to. Later on in this article, 
we'll discuss specific ways of understanding what your 
users need and want. The point here is to list out user 
goals alongside business goals, and discuss any 
conflicts before you start on design work. 

An extremely common example of business needs 
conflicting with user needs is within transactional forms. 
Businesses typically want to gather as much customer 
information as possible, alongside eliciting permission 
to use that information for marketing purposes. 
Customers, on the other hand, want to complete their 


as 


If the website speaks the same 


language as its users, they are far 
more likely to click where the 
owner would like them to 


task as quickly as possible, give away as little 
information as possible, and sign up for no spam at all. 


Prioritise, prioritise, prioritise 

A prioritised list of page content is the first thing to start 
with when designing a new webpage. If you don't know 
what the most important item on the page is, how can 
the page be laid out to convey that? 

Discussing the conflict between business and user 
goals is an invaluable tool for prioritising page content 
and calls-to-action, If you want users to click, you need 
them to clearly understand what and where to click. If 
there are too many options, choice paralysis will set in. 

There are often lots of things that the business would 
like the user to do (buy now, add to shortlist, share on 
Facebook, Twitter, Google+ or Pinterest, read reviews, 
add a review, understand the returns policy, look at 
more products, read another article - the list goes on 
and on). Clearly, the most important item on that list is 
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to actually buy the item. In order to design a coherent 
experience, we need to know which of those options 
the business most wants users to go for. If we know 
that, we can design a page that supports the business 
goals. If we don't know the answer, we'll have to design 
a page that equally supports all those options, which is 
likely to provide a bewildering array of choices. A 
prioritised list of desired page content and outcomes is 
every UX designer's friend. 


Reflect users’ language 

Remember that conversation the website is having with 
its customers? Here's where the analogy comes into its 
own. If the website speaks the same language as its 
users, they are far more likely to click where the 
website's owner would like them to. If site content is 
organised in a manner that is logical to its users, they 
are far more likely to find what they are looking for. A 
sales person wouldn't use complicated jargon when 
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speaking to a new customer face-to-face, so don't do it 
on the website. 

Common mistakes here include using business- or 
system-centric language. For example, my current pet 
hate is a link on the Virgin Tivo UI. It says, ‘express series 
link’. | know from experience that this means ‘record 
series’ but l'm always reluctant to click it as the wording 
introduces doubt in my mind. What on earth does 
‘express’ mean, and why do | want a ‘series link’? 
Another easy mistake to make is to organise a website's 
navigation and information architecture around the 
business's internal structure. Where | work, we call this 
“showing your organisational underpants’ (www. 
cxpartners.co.uk/cxblog/showing_your_ 
organisational_underpants). An example might be 
having main navigation options based on revenue 
streams, when these names mean very little to new 
users arriving from a Google search. Is my virtual 
course listed under Training or Online shop? Who 
knows, but a joined-up experience would be much 
more useful, 

UX practitioners have a number of tools and 
techniques to help them understand their users’ worlds. 
Chief among them is user research in the form of user 
testing. Interview existing or potential website users 
about their needs and concerns. Watch them use the 
website or those of competitors. This is the single most 
valuable activity you can do to improve a site's UX. I'm 
lucky enough to work somewhere with a dedicated 
user research lab. It contains a computer and cameras, 
with audio and video links to a viewing room elsewhere 
in the building. We use a market research company to 
recrult existing customers, or people matching the 
customer profile, as test participants. We typically 
devise hour-long user tests and invite our clients to 
come and view them so they can learn along with us. 

However, you don't need all this fancy kit to conduct 
invaluable user research. You just need a computer and 
some test participants. The key with test participants is 
to get people who have experience of the content 
you're designing around. For a camera website, your 
dad may not be suitable, but your mate the 
photography enthusiast could be. Your client may be 
able to help you out here - can they point you to any 
existing customers? Talk to your interviewee about 
their experiences in your area of interest. Try to ask 
them about past experiences rather than asking them 
to speculate about what they would do - you'll get 
much more accurate information. Note the words they 
use to describe the things they are looking for. Watch 
them using relevant websites. What works, what 
doesn't, and why? 

There is a veritable wealth of information to be found 
on how to conduct user research, it's all over the 
internet and in plenty of books (sorry for the shameless 
plug, but that includes my own book). There is also a 
number of online tools that allow you to conduct user 
testing remotely. 


Website analytics are another useful tool for 
informing user-centric navigation and other naming 
structures. What search terms are users typing into 
Google before arriving at the site? What about the 
search terms users type into any existing site search? 
Can you adapt the terms the website uses to better 
match the terms real people use? 


Support users’ tasks 

The key here is to understand what the website's users 
are looking for and to tell them that the website has it 
(or to not waste their time if it doesn’t). Answer their 
questions at the appropriate time and don't bombard 
them with too much information up front. 

It is useful to capture the gems we learn in user 
research in diagrams. These diagrams are then used to 
support our decisions throughout the design process. 
For example, a task model is a diagram that describes 
the activities users perform in order to reach their goals. 
They help us to create websites that fit seamlessly into 
users lives. 

To generate a task model after conducting user 
research, look for patterns. One way to do this is to 
write each task or activity you heard from your test 
participants on a Post-it note. If you were looking at a 
website selling shoes, you might have heard someone 
say ‘| need to know if this is heel is low enough to walk 
in, so you could write 'Heel height’ on your Post-it. Keep 
going with all the needs you heard in user research. Get 
your Client involved - are there any other questions 
they get asked? Once you've got a wall full of Post-its, 
you can start to organise them. Take away duplicates, 
and then try to put them in chronological order, 


perhaps grouping them into phases in the process, 
This is your task model. You might want to document it 
in a drawing program so you can share it and easily 
refer back to it, but you have all the information right 
there in your wall of Post-its. 

The illustration shows a possible shoe buying task 
model (don't rely on it, it's made up!). There's a free 
task model template available to download from www. 
cxpartners.co.uk/ux-resources. 

Task models come into their own when designing 
the user journey through a website. This is often a 
balancing act between too much information and a 
clean design. For example, a page with a list of many 
products on it needs to provide summary information 
to allow users to decide which product to click to find 
out more. If you know that the main things that your 
shoe buyers care about are price and appearance, 
design a product-listing page that allows users to easily 
see what the shoes look like, as well as refining by price. 

Use a task model to help you decide which features 
are important enough to users that you need to filter 
out unsuitable options early on. Provide richer details 
later in their journey, for example on an individual 
product page where the information may be more 
relevant. Returning to the shoe example, your task 
model might show that most users need to 
understand material and heel height, in addition to the 
overall appearance. Some users care about wide 
fittings and others about returns information. When 
you design the page, prioritise the information most 
users need, then provide the information that others 
want, but give it a reduced visual priority so the page 
remains clear. 
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Anticipate users’ problems 
and concerns 
This is goes hand-in-hand with supporting users’ tasks, 
and is again about having a conversation with a 
website's users that they find helpful. What are your 
customers worried about, and what can you do to 
Bi. $ address their concerns? Again, creating a task model 
helps here. Also, customer-facing staff are great people 
to ask for this information: shop assistants or anyone 
who speaks to customers on the phone. Ask them 
about common customer questions or problems. Ask 
them what they do or say to resolve them 

Recent research has revealed that some users 
wanted to search for a particular product by name, 
while others wanted to use its code. The website only 
used codes to refer to the product, so users who 
wanted to search by name ended up leaving in 
frustration. We redesigned the website to use both 
name and code every time the product was referred to, 
including in main navigation and in search results, and 
this has tested well. If you fail to solve your users’ 
problems on the website, they will have to go elsewhere 
to solve them, and they may never come back. 


Product image 


Free delivery & free returns on all UK orders 


Business goals 
Sell this shoe! 


Increase customers confidence in 
the brand 


Promote free delivery and returns 
Show value for money of product 


Show alternative products if this is 
unsuitable 


User goals 
Is this the shoe for me? 
What does it look like 
What is it made of 
‘Will it fit? 
Did other people like it? 
How much does it cost? 
How much does delivery cost? 
Can | send it back if | dont like it? 


nents in 
the primary requir 


the task model 


Awireframe showing an 
imaginary shoe product page. 
Example content is shown, to 
provide enough information to 
run user tests on. Business and 
user goals are documented in the 
wireframe notes. 


Be trustworthy 
Again, this is about the conversation the website is 
having with its users. Does the business want to come 
across as a trustworthy one? There are many, 

many things that contribute to users’ perceptions 

of trustworthiness. User research will identify the 
important factors for the website's specific situation. 
As food-for-thought, here are some examples I've 
come across: 


O Users don't like surprises, particularly when their 
hard-earned cash is involved. Be really clear about 
stock levels, pricing, and the implications of 
options and extras. 

oO Be consistent. Always refer to the same product 
or concept using the same words, whether that’s 
in site navigation, content or in the shopping 
basket. Make sure sums always add up and 
show what's included. 

oO Users prefer ‘real’ content. Showing your expertise 
with blogs or news can be compelling, but don't 
resort to filler as it will erode trust. Think twice 
before using obvious stock photography. 


Be careful with advertising. A poorly located or 

ill-chosen advert can really undermine trust. 

Conversely, unintrusive ads from companies that 
your users feel complement your offering can be 
seen as helpful. 
Use clear, well-written, proofread copy. Even a 
small thing like a spelling mistake will make some 
users doubt your veracity. 
If you have a customer services phone number, 
show it in the header area of every page. | have 
often seen user test participants looking for the 
phone number of a company they are unfamiliar 
with. They generally don't want to actually call the 
company, but a concrete number is reassurance 
that the business exists in the real world, and they 
are not about to get shafted. 

(a) Use clear design. Make clickable things look 
clickable, Provide clear calls-to-action: make it 
obvious what your users should do next. 


Use social proof 

Social proof is one of psychologist Robert Cialdini's six 
principles of persuasion, which have really worked their 
way into the world of UX over the last few years. One 
persuasion principle is that of reciprocity, whereby if 
someone gives you something, you are more likely to 
give them something in return. Another principle is 
scarcity, in that we feel compelled to act faster if we feel 
that we will otherwise miss out. 

Psychological persuasion techniques can be 
extremely powerful, but be careful not to go too far and 
undermine trust. For example, using the scarcity 
principle to show that there is only one item left in stock 
may well cause users to act, but it will seriously erode 
trust if they think it's made up (are there really 20 other 
people looking at this hotel room right now?) 

The social proof persuasion principle states that 
people are more likely to do something if they see that 
others are doing it too, There are clearly many 
applications of this to web design projects: 


Customer ratings and reviews. Make sure you stay 
trustworthy, though. Don't remove negative 
reviews. I've often seen user test participants 
deliberately seek out negative comments in order 
to reassure themselves the content is genuine. 

QO “People who looked at this eventually bought...” 
and other recommendations. The key here is to 
be genuinely useful. Irrelevant recommendations 
really undermine trust. 

oO ‘Zeitgeist’ links (which reflect what's popular at this 
moment in time) such as top tens, most reads, 
bestsellers or most shared 


Test, iterate, and test again 

If you have examined the business and user goals for 
the website, then they are the first things you should 
test your designs against. Does your design support the 
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business goals for the site as a whole or for any given 
page? Does your design answer users’ needs and 
concerns, as documented in the task model? 

If you really want to make users click, you need to 
watch them using your product. Look at when they 
click what you want them to, and crucially, when they 
don't. Why didn’t they do what you wanted them to? Is 
there anything you can do about it? 

You don't have to wait until you've finished building a 
new website before you test it with users. In fact, it's 
best to test as early as possible. That way, if you need to 
make a change, it should be quick and easy to make. 
Where | work, we typically design wireframes to convey 
the initial UX of a website, Wherever possible, we 
conduct user tests on these wireframes. 

Of course, different practitioners will produce 
different deliverables, ranging from sketches to PSDs to 
fully-functional HTML. But the principle of testing with 
real users remains the same. It is surprising how quickly 
test participants happily interact with even the most 
low-fidelity sketch. We generally test on wireframes 
because we find they provide the best balance 
between understanding if the design meets user needs, 
and making cost-effective changes. They provide 
enough information for users, before requiring the 
visual designers and developers to make changes. 

User testing your designs, whatever fidelity they may 
be, will always show you ways in which you can 
improve them. This time, you're trying to understand if 
users can find everything they need. Do the words you 
have used for the navigation system make sense to 
them? Can they predict what will happen when they 
click on a link? Are they able to complete any forms 
there may be? Even if there is any information missing, 
or your users cannot find it, or your forms are tricky, 


you'll come away from the testing sessions knowing 
what needs changing, and buzzing with ideas on how 
to improve your design 


Don’t assume context of use 

Don't assume you know where users are or what 
device they are using. They may be at home, at work, 
on public transport, or out shopping. They may be on a 
desktop, a laptop, a tablet, a smartphone, an internet TV 
or next year’s new gadget. They may be using more 
than one of these items at once and they will likely be 
using more than one of these devices over the course 
of several interactions with the website. 

Yes, it's unlikely that someone's going to buy a 
£2,000 holiday on their iPhone on the bus on the way 
home, but it's not impossible. Do you really want to 
miss that sale? Admittedly, a more likely scenario is that 
someone who's considering buying a holiday is using 
that spare half an hour on their commute home to 
browse for holiday ideas. 

There is plenty of debate about approaches to this 
question. First, it was all about iPhone apps, then 
mobile-specific websites. Now the focus is on 


Purpose 
(eg work, casual, 
party...) 


Appearance 


Compare 
Size & 
availability 


Sleep on 
it Wide 


fitting? 


responsive design, with techniques and best practice 
shifting over time as lessons are learned. 

Technology issues aside, | would argue that 
consistency is the most important factor here. What if 
your commuter on the bus wants to take another look 
at the holiday they saw in your print brochure or on 
their laptop computer at home? They might be very 
frustrated if their iPhone redirected them to a 
mobile-only website that did not provide as much detail 
as the brochure or the desktop website. How many 
times have you found yourself madly scrolling to the 
bottom of a mobile website in the hope of finding a link 
to the desktop version? 

Of course, you don't want to force mobile users on 
patchy connections to download loads of superfluous 
images, but if the images are truly redundant, why 
subject your desktop users to all that clutter? 

Prioritising your page content and having a thorough 
understanding of the website's users and their tasks 
really helps with decision-making when it comes to 
considering context of use. My advice would be to 
never give your users a reason to go to another website 
to complete their task, even if they are on the bus. 


Returns & 


pty Purchase 
shipping 
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Customise 
the Bootstrap 
framework 


There are a tonne of sites using 
Bootstrap at the moment, make sure 
your site stands out from the rest by 
moving away from the default look 


tools | tech | trends Dreamweaver 


o Setting up 

Copy the start folder from the resource disc 
onto your desktop and open ‘index.html’ in a code 
editor such as Dreamweaver. In the head section add 


the following links that provide the CSS for Bootstrap, 
link to a custom font and our own style sheet that will 
give us the unique look we want. 


02 Link to the JavaScript 

The next part is to link up the JavaScript. Scroll 
to the bottom of the document and there will be some 
code inside <script> tags that power the Carousel. Just 
above those lines add the code shown below that links 
to the jQuery library and the Bootstrap library. 


03 Open the CSS document 

Now we are ready to start adding our content, 
so open the file ‘mystyle.css' - there is already some 
code in there, but add the new code at the top. We will 
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+ Start Folder 
+ Finished Folder 


change the font and background colour slightly, which 
we will do in the body. Next we change the typeface for 
the branding and hl and h2 of the site to our custom 
font from Google Web Fonts. 


04 Branding image problems 

One of the major problems with the site design 
is that the branding image is too large for the header 
and navigation section. In the code below we reduce 
the size of this. We also start to give our navigation a 
unique highlight colour to move away from the 
traditional Bootstrap look. 


08 Unique navigation 

Nothing says Bootstrap quite like the navigation 
bar, so let's start giving this a completely new look. This 
piece of code will give the drop menu an orange 
background when it is selected. Add the following code 


he rise of Bootstrap, or as it was 
formerly known, Twitter Bootstrap, 
has been phenomenal. In case you 
are not aware, Bootstrap is a 
responsive framework created by 
two Twitter employees so that they 
didn't have to start from scratch 
when starting web projects. The 
problem is, there are many people 
using it while not really having the 
understanding that it is just a starting point for projects, so 
we have many sites with a Bootstrap look! 

Bootstrap is built on LESS, so it can be customised using 
that, but there are plenty of people who just want to get on 
to using it and not bother with LESS or having to compile 
via Node and command line. There is a customise page on 
the Bootstrap site that enables a unique look to be created, 
but if you change all the colours, there's no way to save that 
style - so if you want to download a newer version of 
Bootstrap at some point in the future, you will lose that 
unique look you have crafted. The acceptable way to create 
a unique look is to download the base version of Bootstrap, 
and then modify the features in a new CSS file, which is 
what we'll be doing. 


to the section of the stylesheet that is commented with 
Customise the navbar. 


06 Drop down highlights 

If you move your mouse over the drop menu 
you will see that the background here is still the default 
blue, so we'll change that by adding the next section of 
the CSS that changes the highlight colour to orange. 
We do this by overwriting the gradients of the original. 


Finish the drop down 

The remaining code that we add here 
ensures that we cover every browser for the gradient 
background images. Because the original CSS file from 
Bootstrap has the background-image listed for each 


+ As we start the project there are a number of visual Issues that need to be styled, and we 
have the task of making the site look different from Bootstrap’s base theme 


is a Bootstrap template 


<Above> 
+The logo is much smaller now, but the navigation bar still has the default look that tells users this 


ED Myscape 


Another example#* 
headline. 


Waterfalls Beaches 


<Above 


+ The Carousel is made larger so the space given to it fits better. The buttons that control 


the direction also have to be dropped down 


E 


one, we have to set it back to none. Hopefully, one day, 
we might be able to get rid of the multiple prefixes. 


001 background-image: none; 
002 background-image: none; 
003 background-image: none; 
@04 background-image: none; 
@05 background-repeat: no-repeat; 


006 filter: none; 


08 Move the navigation down 

= We want the navigation bar moving down and 
sitting in the white space at the top of the document a 
little better than it currently does. The next section of 
code moves this down, but the bar still has the default 
gradient that makes it look so obviously like a 
Bootstrap-based document. We will sort the gradient 
out in the next step. 


W Myscape 


Waterfalls 


Cities 


<Above> 
+ The drop menu is fully styled, with the background 

of the selected item having the correct colour orange 
background 


001 -Navbar-wrapper 

002 position; absolute; 
003 top: @; 

004 left: 0; 

005 right: 0; 

006 z-index: 10; 

07 padding-top: 20px; 

008 margin-bottom: -9@px; 
009 background-color: #FFF; 


010 3 


Remove the gradients 
“E>” Now we'll overwrite the gradient in the 
navigation bar, so we'll do that by overwriting the 
default values of the nav bar with just white as the 
background colour. As stated earlier, the only reason 
this code is so large is because there are so many 
different browser prefixes required for this to work. 


ee eS 


: „navbar .navbar-inner { 
border: 0; 
background-image: none; 
background-image: none; sek oe: 
background-image: none; 
background-image: none; 
OÖ background-image: none; 


Finish the nav bar 

We also remove the drop shadow that is a very 
default look of the Bootstrap theme. It's probably worth 
checking out at this stage how the changes look. Save 
the file and load the page in your web browser. A few 
simple modifications of the base Bootstrap theme are 
already beginning to give us a unique look. 


øði background-image: none; 
-moz-box-shadow: none; 
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+ The section with three images is highlighted on the page by giving this 
section a different background image. Using CSS3 two images are added to 


give the design a gradient and quilted look 


Beaches 


Waterfalls 


mB My scape | 


box-shadow: none; 
filter; none; 


as » 


1P Focus colour change 
The current page still has the highlight style that 

has the default grey background. We'll change that by 
removing the inner shadow and changing the hover 
and focus colour to the orange that we have used 
elsewhere in the design of our navigation. Save the page 
now and we are really moving away from the default 
look of the standard theme. 


@@1 .navbar .nav > .active > a, 

@@2 .navbar .nav > .active > a:hover, 
@@3 .navbar .nav > .active > a:focus { 
04 color: #f5850c; 

005 text-decoration: none; 

OOG background-color: #fffffF; 

OOT -webkit-box-shadow: none; 
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Waterfalls 


Donec sed odio dul. Enam porta sem 


@@ Myscape 


<Middleleft> 

* The highlight section is made to have the image and headline centred within the column so that it fits 
neatly into the design 

<Above> 

* The Carousel is finally optimised for mobile with the lead section of the caption used and the Carousel 
filling the width of the browser 


<Bottom left> 
* The highlight section now fills the full extent of the browser width in the mobile version of the site. By 
default, Bootstrap adds 20px padding to the mobile version 


the comment Carousel base class. Save this and give 
your browser a refresh to see the changes made. 


gi .carousel .item { 
002 height: 550px; 


B Controlling the Carousel 

” Because we've made the Carousel larger the 
controls need to be moved down to a more central 
position because they are too close to the top at 
present. We add the following CSS rule to keep 
everything the same but just move the controls down 
by 60px to sort out the problem. 


001 timeline. timeline.date.push(tweet); } 
002 deferred. resolve(); 


2 Starting the Carousel 

n One of the main problems you will notice as you 
look at the page is that the Carousel isn't quite big 
enough to deal with our images or the content inside of 
each of the slides. Add the code below to the CSS after 


-moz-box-shadow: none; 
box-shadow: none; 


14 Highlighting the three images 
The three images immediately below the 
Carousel are going to be given greater emphasis now. 


We will do this by adding two background images, 
which is a CSS3 feature. The first will give us a pattern 
while the second will be a gradient. This will help to 
define this section. 


OOL .hilite-wrapper{ 

002 background-image: url(../img/drop.png), 
url(. ./img/diamond_upholstery.png) ; 

003 background-position: left top, left top; 
004 background-repeat: repeat-x, repeat; 
@@5 padding: 5@px 10px 8ðpx 10px; 

006 border-top-width: 1px; 

007 border-top-style: solid; 

@@8 border-top-color: #ccc; 


Centre the heading and image 
“GS The section is nicely highlighted with the 
background, but we also want to centre both the image 
and heading in each column. We could always just 
centre everything in the column, but centred body text 
is slightly harder to read for users’ eyes owing to the 
ragged edge on the left. This code will just centre the 
heading and image. 


O01 .hilite h2 { 
002 font-weight: normal; 
003 text-align: centre; 
} 
«hilite img{ 
display: block; 
margin: @ auto; 


} 

16 Responsive Carousel 

= \fwe change the view of our design so that we 
are at a tablet-sized display, you will see that the 
Carousel has a large section of white underneath it. To 
fix this, we'll change the height slightly and some of the 
positioning. Add the following code inside the @media 
(max-width: 979px) { section of code. 


ði carousel .item { 
002 height: 500px; 

} 
E .Carousel img { 
005 top: 100px; 
006 width: auto; 
007 3 
008 . carousel-caption { 
009 padding: © 7@px; 


aio > 
E Phone-sized fixes 


We just need to add some other fixes now to the 
design when we are at the phone size. Change your 
web browser viewport to a phone-sized display and you 
will see there are a few problems. Add the following 
code inside the @media (max-width: 767px) { section of 
code. This fixes the margins of the Carousel. 


-Carousel { 


E margin-left: -20px; 


H margin-right: -20px; 
} 


Phone Carousel 

Despite the extra width to the Carousel there are 
still some problems. Lets reduce the size of the Carousel 
height and then set the width to be automatically sized 
for the image. Add the following code immediately 
under the last. This helps the image appear much 
better. Next, to sort out the text. 


.Carousel .item { 
height: 300px; 
} 

.Carousel img { 
width: auto; 


} 


19 Change the caption 

With the addition of the following code we can 
see much more of the caption as we've reduced our 
width and moved the text up slightly. Despite these 
changes for the better the text is just too large and 
there is far too much of it, so let's consider how we can 
clear that up. 


.Carousel-caption { 
width: 65%; 
margin-top: 120px; 
} 


20 Caption fixes 

We'll reduce the size of the caption text and 
remove the lead text that is immediately under the 
caption heading. Save this and check out the changes 
in the document. Now you should be able to read the 
heading much more clearly, especially without the 
clutter of the other text. 


-Carousel-caption h1 { 
font-size: 25px; 
} 
.Carousel-caption .lead { 
display: none; 


} 


a Extend to the edges 

The highlight wrapper code is used to highlight the 
three images inside the footer section of the website. We'll 
now widen those sections in order to take advantage of the 
full width of the display in the smaller device by extending 
the margins, as the base class for Bootstrap brings the 
margins in by 20px. 


001 .hilite-wrapper{ 
002 margin-left: -20px; 
margin-right: -2Qpx; 


re 


Tools to help theme 
Bootstra 


ylebootstrap.info 


h (www.lavishbo: 


otstrapther 


Final fix 

For the last part, we will add a little more space to 
each entry in the highlight section and reduce the size of 
the typography further down the page. With this in place, 
save your file and you should see a fully responsive 
Bootstrap site that starts to move away from the default 
look and feel of the template. 


-hilite .span4 + .span4 { 
margin-top: 4@px; 

3 
. featurette-heading { 


= font-size: 25px; 
3 
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Create WebGL 
site headers 
with browser 
fallback 

to Canvas 


Make 3D headers that shine on 
desktop browsers and hardware but 
dont leave mobile devices stranded 


tools |tech| trends Dreamweaver 


Sourcefiles 
available 


= Start folder 
+ Finished folder 


or Starting out 


From the resource disc, move the ‘start’ 
folder of this tutorial onto your desktop and open up 
the file ‘index.html’ in Dreamweaver or a similar code 
editor of your choice. Take a look at the body content, 
and you'll see that there is a div tag named ‘container’ 
- the WebGL will go here. Scroll down to the third script 
tag and add the following variables before the 
‘createParticles’ function. 


flame design studio 


var renderer, scene, camera; 
var sphere, uniforms, attributes, group; 
var WIDTH = window, innerWidth; 

004 var HEIGHT = window. innerHeight/2; 


02 Remaining variables 

You will have noticed two previous script tags - 
these are special scripts that create the shaders for the 
particles in the project, hence why we need to add the 
variables in the third script tag. We've already added the 
code that makes the particles; we will add the rest of the 
project in this tutorial, though. 


var mouseX = 0, mouseY = 0; 

var lastUpdate = new Date().getTime(); 
var windowHalfX = window. innerWidth / 2; 
var windowHalfY = window. innerHeight / 2; 


Depending on the device and browser, your site can be 


/erloaded with great 3D design, or have something a bit 
more restrained 


Call the functions 

The variables are holders that will hold values 
within our code that we need to access at various times, 
Now add the code as shown here, which calls two 
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n this tutorial we're going to explore 
adding WebGL to either a 
homepage or header for a website. 
Support for WebGL is fairly 
widespread but there are some 
exceptions to the rule. The chief two 
exceplionis corne from mobile and 
Internet Explorer. With mobile usage 
neither iOS nor Android support 
WebGL and this is largely down to the 
security threats that could potentially 
come from WebGL given the access to low level rendering 
of graphics. Surprisingly the Blackberry Playbook does 
allow it (although there is a hefty warning screen), but it 
runs quite fast. IE can support WebGL through Chrome 
Frame (www.google.com/chromeframe) even though 
there is no native support. These drawbacks cause 
problems for us as we prepare our content. ThreeJS gives 
the option of rendering using Canvas or WebGL, so we'll 
use WebGL if it’s supported and if not a cut-down version 
will be provided and rendered through Canvas. The Canvas 
renderer is not as fast as WebGL so we'll lose the particles 
when rendering to Canvas. Canvas also requires the 
particles to be programmed slightly differently so it makes 
sense on two levels to cut this out. 


functions. The first will initialize our 3D scene, while 
the second function will animate that scene on the 
web page. 


initQ; 

m animate(); 
» Create the init function 

i The init function sets the scene up, so we'll go 
ahead and create that function right under the last 
code. Here we define a new camera to view the scene. 
This takes the arguments for field of view, aspect ratio, 
how near and how far we can see in the scene. We 
position this camera to look down the Z axis and set up 
a new Scene. 


@@T function init) { 
OOZ camera = new THREE.PerspectiveCamera( 40, 
WIDTH / HEIGHT, 1, 10000 ); 
03 camera.position.z = 300; 
scene = new THREE.Scene(); 


05 Addalight 


We will not be able to see anything in our scene 
unless we have a light shining so the next block of code 
sets up a new light with white as its colour. We position 
the light to be shining from the Z axis so it shines from 
the point of view of the camera. We then add the light 
to the scene. 


gai var light = new THREE.DirectionalLight( 
OxfffFFF ); 


Swen penn 


three. js 
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<Clockwise from top left> 
+The tutorial is powered by the Threejs WebGL library, this has support for rendering in WebGL, Canvas and CSS (mrdoob.github.io/threejs) 
+The project has been started with a basic DOM structure in which we are going to add our 3D content as a header 

+ If WebGL is available in the browser for rendering then 10,000 particles are rendered into the web page with a glowing additive texture 
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+We call the createLogo function that will draw a dynamic shape for us and extrude it when we add this function to the code later 


02 light.position.set( ð, 0, 1); 
003 scene.add( light ); 


06 Group objects together 

We are setting up a group that we can add 
many elements into. This is useful if you want to move 
many elements in one go, you can just move the group 
and everything will move with it. Once the group is set 
up we add the group into the scene as we did with the 
light in the last step. 


@@1 group = new THREE.Object3D(); 
@@2 scene.add( group ); 


Check the renderer 

We are now going to check the type of renderer 
we have available to us. If we can render through 
WebGL then we are going to call the createParticles 
function code. Particles can be rendered through the 
Canvas renderer but with different code. Canvas is a 
much slower renderer so we are keeping the page 
content lower. 


We are going to create the logo froma 


Canvas-drawn shape 


01 if(Detector.webgl) { 
002 = createParticles(); 
003 } 


08 Creating the logo 

The next line of code calls a function that we 
have yet to write named ‘createLogo’ This does 
exactly what it says. We are going to create the logo 
from a Canvas-drawn shape, extruding this and 
texturing in our code. This is because the canvas 
renderer isn't great at bringing in loaded models, so 
we'll create one with our code! 


@@1 createLogo(); 


Choosing how to display 
Use the detector code we used earlier to check 
to see if the browser has WebGL available. If it has then 


we use this much faster renderer and set the anti 
aliasing (edge smoothing) to true. If there is no WebGL 
renderer then the Canvas version is used. You could 
easily add an else statement here that uses an image if 
Canvas isn’t supported. 


OOL if(Detector.webgl) { 

@@2 renderer = new THREE.WebGLRenderer( { 
antialias: true } ); 

@03 } else if(Detector.canvas) { 

@@4 renderer = new THREE.CanvasRenderer(); 
005 } 


10 Display the 3D content 
The next block of code sets the size of the 
renderer to the width and half the height of the browser, 
as that's the size we want to allow for the view. We store 
the div tag with the id ‘container’ in the variable of the 
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<Clockwise trom top left> 


+ If there is no WebGL renderer present in the browser then a more cut down version is served to the browser that only has the 


logo created in 3D 


+The 3D shape is first drawn onto an invisible 2D canvas and then dynamically extruded to create the full 3D shape 


+The mouse position (or touch position) is tracked and the logo is rotated in 3D to face the mouse on the page 


Once everything has been added then the full experience works together with a full particle and 3D logo for WebGL browsers 


and just the logo for Canvas-enabled browsers 


same name, then finally we add in the renderer to the 
container so it is in the DOM. 


Øi renderer. setSize( WIDTH, HEIGHT ); 

B var container = document .getElementById( 
‘container’ ); 

003 container .appendChild( renderer .domElement 


5 


n Listening in 

=" The code here sets up three listeners. The first is 
for the mouse moving, the second is if the content is 
viewed on a touch screen device and a finger is moved 
anywhere. The last line is the window resize which will 
redraw the WebGL/Canvas display accordingly to 
display for the new size. 


Öö document. addEventListener(‘mousemove’, 
onDocumentMouseMove, false); 
002 document .addEventListener( ‘touchmove’ , 
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onDocumentTouchMove, false ); 
003 window. addEventListener( ‘resize’, 
onWindowResize, false ); 


004 } 


Dynamic 3D shape 

When we've drawn the path for our 3D shape we 
will call the function started in this step. This will extrude 
the path into 3D and add a material to the mesh. We are 
passing into the function the shape of the path, the 


flame design studio 


AN 


extrude settings, color, position, rotation, scaling and 


opacity of the new model. 


@@1 function addShape( shape, extrudeSettings, 
COLOR OX rE ar ar ay TE OF, 

@@2 var geometry = new THREE.ExtrudeGeometry( 
shape, extrudeSettings ); 

@@3 var mesh = THREE.SceneUtils. 
createMultiMaterialObject( geometry, [ new 
THREE .MeshLambertMaterial( { color: color, 
opacity: 0} ) 1); 


Position the mesh 

In the next block of code we use the settings 
that have been passed into the function to set the 
position, rotation and scaling of the mesh. Once this is 
done we add the mesh to the group that we set up in 
step 6 of the code. 


@01 mesh.position.set( x, y, z ); 


02 mesh.rotation.set( rx, ry, rz ); 
@@3 mesh.scale.set( s, s, s ); 

004 group.add( mesh ); 

005 } 


Creating the logo 

We set up our function that will create the logo. 
At present this just has a new variable that is holding a 
shape, so it is expecting some points of a shape to be 
put in here. In the start folder, open the text file step14. 
txt in a text editor. Copy and paste the shape data just 
after the code shown here. 


Q01 function createLogo(){ 
002 var logo = new THREE. Shape(); 


9, Extrusion settings 

“= Now we set the extrude settings of the shape, 
which define how much to extrude the shape by and 
the size of the bevel with the thickness as well. We're 
adding a very subtle bevelled edge to the shape. Now 
we have the shape and the amount to extrude it, we call 
the addShape function from steps 12 and 13. 


@01 var extrudeSettings = { amount: 8, 

002 size: 10, height: 4, curveSegments: 6, 
003 bevelThickness: 0.4, bevelSize: 0.4, 
bevelEnabled: true }; 

04 addshape( logo, extrudeSettings, OxFFAA33, 
-80, 100, 0, 3.14, @, @, 2, 0.9); 


005 } 
4 Update the view 


If the window is resized the camera is updated to 
redraw the display to the new width and height of the 
document. The camera settings have changed and so 
the updateProjectionMatrix is called. This will make the 
display redraw. The renderer is also updated to reflect 
the new resized browser window. 


@@1 function onWindowResize() { 

002 camera.aspect = window. innerWidth / 
(window. innerHeight / 2); 

003 camera. updateProjectionMatrix(); 
004 renderer. setSize( window. innerWidth, 
window. innerHeight/2 ); 


005 } 
7 Responding to the mouse 


If the mouse moves around, we want the logo to 
spin in 3D and follow it, so we need to store the position 
of the mouse from the halfway point of the document 
on both axes. This will allow the model to spin around 
the centre position, so when the mouse is above half 
the document we can make the logo face upwards. 


function onDocumentMouseMove( event ) { 
mouseX = ( event.clientX - windowHalfXx ); 
mouseY = ( event.clientY - windowHalfY ) 
4} 


18 Responding to touch 

= Obviously, in this day and age your website 
visitor is quite likely to be looking at your page on a 
device with a touch screen (such as a smartphone or 
tablet), so here we need to register the touch 
movement and take the position of this exactly as we 
did with the mouse and store the position so that we 
can rotate it later. 


function onDocumentTouchMove( event ) { 
if ( event.touches.length == 1 ) { 
mouseX = event. touches[ @ ].pageX - 
windowHalfX; 
004 mouseY = event.touches[ @ ].pageY - 
windowHalfY ; 
005} 
006 } 


19 Animating the scene 

The requestAnimationFrame is a W3C 
specification for allowing browser vendors to take the 
strain of running a loop. This used to be done with 


setinterval but now can be done by calling this function. 


All this does is call itself, so we update the display by 
calling the render function. 


OOT function animate() { 
002 requestAnimationFrame( animate ); 


003 render); 
004 } 


20 Checking before we render 


Now we set up the render function as 


mentioned in the last step. The first thing we need to do 


here is check whether we have WebGL enabled. If so, 
then we are going to animate the particles; if not, we'll 
just move on to animating the 3D model's position in 
the scene. 


function render() { 
2 if(Detector.webgl) { 


Aà Animate the particles 

3 We want the particles to be continually 
animating so here we rotate all of the particles on 
the X axis which gives a swirling up and down motion, 
then we check the size of the particle and make them 
pulse up and down in size, which are then updated in 
the display. 


001 var time = Date.now() * 0.005; 
002 sphere.rotation.x = -0.01 x time; 
003 for( var i = 0; i < attributes.size.value. 
length; i++ ) 
004 c 
005 attributes. size.valuel i ] = 24 + 13 * 
Math.sin( 0.1 * i + time ); 
06 } 
attributes.size.needsUpdate = true; 


008 } 


i Rotate the model 


Our final step of code takes the mouse X and 
mouse Y position and then uses it to rotate the model 
We then divide the mouse position by such a high 
number because we rotate in radians, 3.14 (pi) is 180 
degrees. Any high numbers would cause the model to 
spin erratically. We then tell the renderer to render the 
scene and the camera. Test this in a browser to finally 
see it in action and, once you're happy, you can get to 
work on rendering your site logo in glorious 3D. 


001 group.rotation.y += ( (mouseX/25) - group. 
rotation.y ) * .05; 
002 group.rotation.x += ( (mouseY/250) - group. 
rotation.x ) * .05; 
camera. lookAt( scene.position ); 
renderer.render( scene, camera ); 


} 


Request 
AnimationFrame 


The requestAnimationFrame 
function is fairly new, so it won't 
work on old browsers. 
However, neither will WebGL or 
Canvas so you can use it with 
these technologies. 


Create Canvas Drawings 


with Illustrator 


Drawing complex shapes in HTML5S 
Canvasis a bit of aheadache. Adding the 
drawing pointsin JavaScript tocreatea 
decent drawing such asa logo would take 
an immense amount of trialand error 
Fortunately we have access to excellent 
drawing toolsin Illustrator. As it's a vector 


drawing package, it produces artwork 
ìon mathematical points that can be 
ated in JavaScript. A plug-in i 
available which allows export from 
Illustrator quickly: the C 5 version is 
available frombit.ly/OljseG and the CS6 
version from bit.ly/NttwGQ, This adds an 
extra option from the export menu to 


choose ‘Car ny effects that can't be 
drawn using the Canvas API will be 


converted into anima, 
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Generate 
HTML code 
with Ruby 


Blogging for hackers? Create and 
compile static HTML site content using 
Ruby and a monster of a gem... 

tools | tech | trends Ruby; any code editor 


@ Instal Jekyll 
Jekyll is best installed as a Ruby gem, direct from the source. Open up 
your Terminal window and enter the following command (line 1) to install the 
Ruby gem. Were also going to install some other gems which we'll use in our 
automated tasks. Once complete, verify that you have Jekyll installed by 


running the version request command (line 2): 


02 Create a project 

The structure of a typical core Jekyll project relies on a number of 
directories, into which all of our written content will be placed and the 
resulting code generated automatically to make our lives a little easier. Enter 
the following commands into the Terminal window to generate the required 
structure as well as the default layout files. Alternatively, the start project is also 
available on this issue's cover disc. 


03 Configuration file 


Open up _configyml in your preferred text editor. This file lets you 
define some configuration variables used to generate and compile your Jekyll 
static files. The full code content for this file is included in the project files on 
the CD, so copy and paste the content into the config file. 


OE sy SOE See 8 verry a 
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+ Start project 
+ Final project 
«Step code 


ontent management systems are 
powerful tools in their own right, and 
have become a popular way for 
bloggers and organisations to share 
and manage online content. 

While using a pre-built CMS or 
blogging platform can be beneficial, we 
start to tie ourselves into dependencies. 
We need a hosting solution that 
provides the server-side language required by the CMS 
and a database for data storage, as well as references to 
media libraries and a host of other data relationships. 

Databases can seriously impact site performance, 
especially if not regularly maintained, while server-side 
languages take time to process files for display. What you 
may need is a pure HTML site that is fast to load, intuitive 
to manage and easy to update and deploy on any server. 
In this tutorial we dive into the world of static site 
generation using Jekyll, a Ruby gem which compiles and 
creates static HTML site content from simple markdown 
files. We'll create multiple layout templates and see how 
to use include files to increase modularity and reusability, 
as well as taking a look at Rake files, 


Start the server 

Now let's activate the Jekyll server to make sure that we can access the 
site on our local machine. You need to open the Terminal window again and 
then navigate to the directory where your Jekyll site is located. Run the 
following command to turn on the server. You should see a response flag up 
indicating the localhost URL development port. 


Ein Sai eS eae 
Initial compile 


05 With the server running, we can view to the local site in our browser by 
going to http://localhost:4000 (assuming the default values are unchanged 
in _config.ym)). You will see an empty page as we have not yet added any 
content, but viewing the source code you will also see a copy of the root 
index.html file has been moved to the _site directory. 


06 Work up the layout 

The next thing we need to do is open the _layouts/default.htm! file. 
This will contain the main HTML template for our website. The title tag is 
populated with a variable to display the current page title, which will be 
drawn from the YAML Front Matter values which we'll be placing in each file 
that we generate. The {{ content }} tag, meanwhile, will display the content 


from the requested page. 


005 <link rel=“stylesheet” href=“/css/style.css” type=“text/css” 
media=“screen” /> 
<title>{{ page.title }}</title> 
</head> 
<body> 
<div id=“wrapper”> 
<div id=”aside”> 
<hi><a href="/”>My Jekyll Site</a></hl> 
<p>Sub-Heading</p> 
</div> 
<div id=“content”> 
{{ content }} 
</div> 
</div> 
</body> 


@19 </html> 
© Homepage 


= Open the index.html from the root of the project. Define the YAML 
Front Matter at the very beginning of the file and make sure that it's 
surrounded in a block of three dashed lines. Here we specify that this file must 
use the default layout, as we also set the title for page, which will be used in 
the template after it is rendered. 


øði layout: default 
002 title: My Jekyll Site 


Post template 

= For this step, you will need to open up _layouts/post.html. Any posts 
which we create will use this template, but this in turn must implement the 
default template so that the content will be rendered the way that we want. 
Once again, set the YAML information, as per step 7. We also assign the post 
variable to a new variable - page - and we'll use an include file for reusability, 
which we'll be focusing on in the next step. 


QO layout: default 


{% assign post = page %} 
£ {% include post.html %} 
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Include file 

Open _includes/post.html. This HTML will handle the display formatting 
for our individual post content only. Here we are able to use the post-specific 
Liquid template variables to create the URLs to each post and output the title 
as a header, We can also control the output of the page content and truncate 
the length when we're displaying it in a list (<li>) page. 


<h2><a href=“{{ post.url }}” title=“[Permalink] {{ post.title 
}}">{{ post.title }}</a></h2> 

{% if page.title != post.title %} 

{{ post.content | strip_html | truncate: 200 }} 

{% else %} 

{{ content }} 

{% endif %} 


10 Stringing it 

Let's add more to the include template. Below the content variable, we 
can output the date of the post and, using a built-in function, we can convert it 
to a readable string format. We'll also display another link to open the full 
article, but again only if itis currently being shown on a <li> page. 


<ul class=“meta_data”> 
<li> 
<img src=“/images/date_posted.png” alt=“” width="“26” 
height=“26” /> Posted {{ post.date | date_to_string }} 
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</li> 
{% if page.title != post.title %} 
<li> 
<a href=“{{ post.url }}” title=“[Permalink] 


- {{ post.title }}”><img src=“/images/read_more.png” alt=“” 
width=“26” height=“26” /> Read full article</a> 


</li> 


{% endif %} 
</ul> 
Looping posts 
Open up the root index.html file once more. Inside here we'll add some 
code to loop over the generated posts and display them within the template. 


The loop itself is a simple ‘for in’ loop, and for each post we discover, we'll 
implement the post template file from the _includes folder. 


{% for post in site.posts %} 
{% include post.html %} 
{% endfor %} 


r Generate a post 


We can produce a post by creating the file manually within the _posts 
directory. The file must follow a strict naming convention of the post date and 
the title of the post with spaces separated by hyphens (see below). Jekyll will 
use this format to generate the necessary directory structure when compiling. 
Here we are using markdown, so the file extension will be .md. 


BT 2012-11-01-my-new-post.md 


Post YAML 

Each post must also contain the required YAML Front Matter at the top. 
Here we are telling it to use the post layout, as well as giving the post title for 
display purposes. We can also assign the post to any categories, and any 
number of tags to the post by setting them as a YAML list, like so: 


ð layout: post 


title: “My New Post” 
categories: 


194 Web Design Tips, Tricks, & Fixes 


-= design 


Post content 

The content of your post can then be written directly into the file. You 
can use HTML tags if you prefer, but a big benefit of using Jekyll to compile 
the site is that we can also use markdown language or plain text. Jekyll will 
convert the content into relevant HTML tags for you. Check out this resource 
for more information on markdown syntax: http://nonkeh.me/8Ivdb. 


5 Stylesheet 

Copy the stylesheet from the cover disc project Start folder and add it 
into the CSS directory within the working project location. Any files or 
directories not prefixed with an underscore character will automatically be 
included in the generated site directory by Jekyll. This can be overridden by 
adding them to the excluded property list in the _config.ym| file. 


gdi exclude: [‘Rakefile’,‘.gitignore’] 


16 Rake automation 

Although not required for Jekyll sites, this project includes a Rake file to 
help automate tasks and manage some code generation. Open up your 
Terminal window and type the following command to return a list of available 
tasks we can perform to help when working with our static site. 


ði > rake 
v Rake it over 


Run the rake post command in the Terminal window. This will 
automatically create a new post page for you, ready to edit and fine-tune. This 
task accepts two optional parameters, which allow you to specify the title of 
the post and also add a particular post date. If not supplied, the current date 
will be entered by default along with a generic title. 


gi > rake post title=“My Second Post” date=“2013-06-04” 


ig) Preview thesite 
Run the rake preview command in your Terminal window. This will fire 
a number of dependent tasks to clean and rebuild your static site content. It 
will also create a directory structure for category and tag archive pages, as 
well as a tag and category cloud files in the _includes directory. You can give 
the site a quick once-over at http://localhost:4000. 


01 > rake preview 
002 ==> Cleaning build directory... 


003 -site directory is now empty. Housecleaning rocks! 
004 ==> Generating tag cloud... 

005 ==> Done. 

006 ==> Generating tags... 

007 ==> Done. 

@08 ==> Generating category cloud... 

@@9 ==> Done. 

@10 ==> Generating categories... 

@11 ==> Done. 


012 Auto-regenerating enabled: . -> ./_site 
@13 [2012-11-22 23:15:10] regeneration: 21 files changed 
014 (2012-11-22 23:15:10] INFO WEBrick 1.3.1 
@15 [2012-11-22 23:15:10] INFO ruby 1.9.3 (2012-04-20) [x86_64- 

3 darwin10.8.0] 
@16 [2012-11-22 23:15:10] INFO WEBrick: :HTTPServer#start: 
pid=43174 port=4000 


Adding meta 

Open up _includes/post.html, Now that we have got the tag and 
category listing files generated for us, we can begin to incorporate them into 
our template. We only want to display them when we are viewing a specific 
post and not in a list page, and we can control this by simply amending the 
existing conditional statement. 


Q01 {% if page.title != post.title %} 

<li> 

002 <a href=“{{ post.url }}” title=“[Permalink] {{ post.title 
}}"><img src=“/images/read_more.png” alt=“” width=“26" height="26” 
/> Read full article</a> 

</li> 

{% else %} 

003 <li>Tags: {% include tag_cloud.html %}</li> 

004 <li>Categories: {% include category_cloud.html %}</li> 

{% endif %} 


20) Includes in sidebar 

We can also include the tag and cloud link lists within the sidebar of 
our site design. Open _layouts/default.html and add the two references to the 
include files within the aside <div> element. This will show on every page 
request as it is now part of the main template. 


OAT <div id=“aside”> 

002 <hi><a href="/">My Jekyll Site</a></hi> 

@@3 <p>Sub-Heading</p> 

004 <p>Tags: {% include tag_cloud.html %}</p> 

005 <p>Categories: {% include category_cloud.html %}</p> 
006 </div> 


21) Add pagination 
At this point we're going to add pagination to our Jekyll site. The 
_configyml file accepts a paginate property for the number of posts to show 


__ Aas 


on each page. We also need to amend the loop within index.html to change 
the collection value from site.posts to paginator.posts, which will govern the 
number of posts returned during generation. 


001 {% for post in paginator.posts %} 
002 {% include post.html %} 
003 {% endfor %} 


22 Pagination links 

— Finally we need to include the code into _layouts/default.html to add 
the pagination links. We will only display the next and previous links if we have 
content to display on those pages, and if the first page number is ‘1’, we will 
take the user back to the homepage. 


@01 <div id=“pagination”> 

002 © {% if paginator.previous_page %} 

003 {% if paginator.previous_page == 1 %} 

004 <a href="/" title="Previous Page”>&laquo; Previous</a> 
005 {% else %} 

006 <a href=“/page{{ paginator.previous_page }}/” 
title=“Previous Page”>&laquo; Previous</a> 


{% endif %} 
= {% endif %} 
009 = {% if paginator.next_page %} 
@10 = <a href=“/page{{ paginator.next_page }}/” title=“Next 
Page”>Next &raquo;</a> 
O11 = {% endif %} 
012 </div> 


beautitul pages 


Deploymentand GitHub 

One of the main benefits of creating sites using the Jekyll 
erver generation proce: is that we end up creating and 
managing static site content, fully populated and compiled 
and ready for deployment. As such, we're not dependent on 
any specific hosting plans or the requirements for database 
access or server-side langua; the processing fis 
taken care of locally on our own machines. 

With the static content created, we can upload and 
transfer our pages to any web server that works with HTML 
files. We can use a straightforward FTP program, the 
command line and tools like rsync or scp, or even the 
open-source Capistrano for automated deployment 


If you store your raw Jekyll site in a GitHub repository, you 


can take advantage of free hosting offered by the repository 


provider and serve your site using GitHub Pages. This will 


convert the raw code through Jekyll on your behalf every 
time that you push updated content to the repository. Head 


over to http://pages.github.com to learn more 
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ring super 
search to PHP 
apps with Solr 


In this tutorial, we'll step through 
setting up Solr to index data from 
(and return search results to) a simple 
PHP application 


tools | tech | trends Apache or any PHP-enabled web server, MySQL 
server and a MySQL client, Solr, a text editor or IDE, Java 1.6 or higher 


Start with a table 

Let's start by creating the database, which has a single table to store 
products. Fire up a MySQL client (MySQL Workbench, PHP MyAdmin or the 
command line are all good choices) and run these commands: 


Fill the table up 

Now let's add some data - you can either use the command line, or 
run the supplied product-data.sq| file. This table will get more sophisticated in 
the next tutorial, but for now this will give us five vintage-computing-themed 
products to start indexing and searching, with a range of prices. 
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“Step Code 


earch is the lifeblood of the web, but 
on many sites it can be a decidedly 
underwhelming experience, lacking 
the richness and accuracy that users 
have come to expect from Google. 

If you are developing sites using PHP 
and MySQL, search can be very difficult 
to do well - especially if you need it to 
be quick as well as comprehensive. 
So, what is the solution that will give your sites a search 
facility that will work quickly and accurately? 

Enter Apache Solr: an open source search tool 
providing fast and accurate results on a very scalable 
platform, with a whole host of advanced features: 
faceting, spellchecking, hit highlighting, result boosting 
and more, It runs as a Java servlet, so needs a container 
like Tomcat or Jetty - to get started, we'll be using the 
build of Jetty supplied with the Solr download. It'll run on 
OS X, Windows or Linux at the command line. 

We'll introduce the key Solr schema file, set one up for 
our sample application, then walk through using a PHP 
library to connect to our Solr server, index data from our 
database and return search results. 


Start Solr 

Download the 4.x release from the Solr website and unzip it to a 
convenient location on your machine (we used /opt/solr-4,2.0/), Solr comes 
supplied with an example application, ready to run - in a subdirectory of the 
unzipped Solr build called ‘example’. In the terminal in OS X, a shell in Linux or 
the command line in Windows, go to the example directory and start Solr: 


04 The Solr admin panel 


You can now browse to the Solr admin panel from any web browser at 
localhost:8983/solr/, You should see the Solr admin panel, which we'll look at 
in more detail a little later. If you can’t browse to it, look at the terminal output 
to see if there are any error messages. If all is well, stop Solr running by hitting 
Ctrl+C in your terminal. 


The Solr schema 


In the example app we're looking at, the schema.xm| file lives at 
/example/solr/collection/conf/schema.xm. Browse to this file and open it in 
your text editor of choice. Next you're going to add some fields to your 
schema - these correspond directly to the fields you have already set up in 
the database. Solr is very flexible, allowing you to define data types with a 
huge variety of filters, but here we're using some stock ones from the 
example schema. 

Find the field definition for ‘id (<field name="id" type="string” indexed="true” 
stored="true” required="true” multiValued="false” />)’ and underneath it, add 
these lines: 


Ə Check Solr schema 

“= Save schema.xml and start the Solr instance again. Head to the admin 
panel at localhost:8983. If you get any error messages, stop Solr by hitting 
Ctrl+C, check the schema file has no typos and is properly formed, then retry. 


07 A blank application 

Now it's time to set up your PHP application. You should have a web 
server set up on your development machine, and a directory that we can use 
for this tutorial (either the site root, a virtual host or a subdirectory). We'll refer 
to this location as the website home directory. We'll also assume you can 
browse to the site at http://localhost - if you are using a different hostname, 
or a subdirectory, just use that instead. Now go to your website home 
directory and create four empty files with the following names: 


@@1 export. PHP 
002 search. PHP 


103 constants. PHP 
| results. PHP 


68 Time for constants 

There are some variables we'll need to use repeatedly - database 
connection parameters, and the host, name and port of our Solr instance. To 
make life easy, we'll define those in our constants file. Open constants.PHP in 
your text editor and add the following lines, making sure you add your own 
database username and password where appropriate: 


01 <?PHP 

002 define(‘DBUSER’, ‘root’); //change this value to your DB 
username 

003 define(‘DBPASS’, ‘password’); //change to your DB password 
004 define(‘DBHOST’, ‘localhost’); 

005 define(‘DBSCHEMA’, ‘solrtut’); 

@06 define(‘SOLRNAME’, ‘/solr’); 

OOT define(‘SOLRPORT’, ‘8983’); 

008 define(‘SOLRHOST’, ‘localhost’); 

009 > 


09) Solr PHP clients 
= There are a number of clients available for PHP that work well with Solr, 
including the excellent Solarium. The simplest to get up and running with is 
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the Solr PHP Client, available from bit.ly/17JAdPp, Download the latest archive 
and unzip into the root of your web app directory. Once you've extracted the 
archive into a subdirectory (call it SolrPHPCient), you can remove the zip file. 


10 Fixing Solr PHP client 

== There is an issue with solr-PHP-client that prevents it from working with 
the current version of Solr (4.2), due to some Solr commands being 
deprecated. To make sure everything is working as it should, we need to apply 
a patch file, which is available from http://bit.ly/140Tutl. Download the Service. 
PHP patch file so it's in the same directory as Service.PHP in the solr-PHP-client 
- /SolrPHPClient/Apache/Solr/Service.PHRpatch. Then you can either apply it 
using the command below, or any patching tool (Netbeans has one built in - 
just select Tools>Apply Diff Patch from the main menu). 


u Preparing data 

Now let's add data from the database to the Solr index. We'll start by 
writing a skeleton file to connect to the database and grab the records. Open 
export.PHP in your text editor and add the following lines: 


ðt <2PHP 

002 require(‘constants.PHP’); 

003 $mysqli = new mysqli (DB-HOST, DB-USER, DB-PASSWORD, DB- 
SCHEMA) ; 

004 if ($mysqli->connect_errno) { 

005 echo “Failed to connect to MySQL: (” . $mysqli->connect_ 
errno . “) ” . $mysqli->connect_error; 

006 } 

007 /* Select queries return a resultset */ 

OOB if ($result = $mysqli->query(“SELECT * FROM products”)) { 
009 printf(“Select returned %d rows.\n”, $result->num_rows) ; 
@10 /+We’re going to add rows to Solr herex/ 

@11 /* free result set */ 

@12 = $result->close(); 

13 } 

014 2> 


42) Indexing data 
You should now be able to browse to localhost/export.PHP and see a 
result count. Now that we know we can connect to the database and access 
our records, let's loop through our results and then send them to Solr. In 
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export.PHP, replace the line /*We're going to add rows to Solr here*/’ with the 
following chunk of code: 


//declare an empty array to hold our data to send to Solr 
$documents = array(); 
require_once(‘/solr-PHP/Service.PHP’); 
$solr = new Apache_Solr_Service(SOLR-HOST, SOLR-PORT, 
SOLR_ NAME); 
J5 while ($result = $results->fetch_object()) 
{ 
// For each result, create a new Solr doc 
$document = new Apache_Solr_Document() ; 
$document->id = $result->product_id; 
$document->description = $result->description; 
$document->name = $result->name; 
$document->price = $result->price; 
//add document to array 
$documents[] = $document ; 
} 
if (!empty($documents) ) 
{ 
$solr->addDocuments($documents) ; 
$solr->commit() ; 
$solr->optimize(); 


B Pushing data to Solr 


After making sure that the Solr server is running (start it up if it isn't 
already), refresh localhost/export.PHP inside your browser. Solr will now be 
populated with the records pulled from our database. There are many different 
ways to get data into Solr, including simply sending it an appropriately formed 
XML file using CURL. Using the technique above, however, allows us to do 
some simple error checking and is very effective for replacing the contents of 
an entire Solr index. 


4 Solr query syntax 

Now we can check if the data is actually present by running some 
simple queries against our Solr instance. The query syntax is rather different to 
SQL - you start with the field name you want to query, then the data you want 
to match, like ‘product_name:Vic 20° To start with, we just want to run a 
wildcard query to make sure our data is present and correct: *:*' will do that. 
We do this by forming an appropriate HTTP GET request directed at our Solr 
instance and placing the query string in a parameter called ‘q’ - so when we 
access the URL below, we should see our five records. 
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5 Search page skeleton 


So we have a Solr index with some data in; now we want to make a 
form and results page so we can search it from our PHP application. We'll start 
by making the form, which in this case is about as basic as it's possible to get 
- open search.PHP in your text editor and add the following code: 


<html> 
<body> 
<form action=“results.PHP” method=“get”> 
<label for=“query”>Search:</label> 
<input id=“query” name=“query” placeholder=“Enter your 
search” /> 
<input type=“submit”/> 
</form> 
</body> 
</html> 


16 Search page details 

Now that you have a query form, let's make up a page in order to get 
some results. Open results.PHP in your text editor, and then put the following 
comment skeleton in place: 


<?PHP 
- //1. check that a query has been submitted, send user back to 
search page otherwise 
003 //2. if we have a query term, connect to Solr, query and grab 
the result 
004 //3. check the results - are there any? If not, display an 
appropriate message 

// if there are results, iterate through them and display 

?> 


ca Get the query term 

Now it's time for some basic control here: we'll check that the query 
string has been submitted, and if it hasn't been then we redirect back to our 
search page. Obviously all the usual advice about sanitising user input applies 
- in production, you should treat the user input that you're passing to Solr with 
the same caution you'd use with anything being passed to a database server. 
So, in results.PHP, enter the following code under the comment that starts 7/1. 
check that a query... 


if(!isset($_REQUEST[‘query’]) || empty($_REQUEST[ ‘query’ ])) 
{ 

header (“Location: http://localhost/search.PHP”) ; 

} 


else 
{ 

$query = $_REQUEST[ ‘query’ ]; 
} 


18 Query Solr 

i We have a query, so we are going to connect to Solr using the same 
mechanism as we used when populating the index. Then we'll use the search 
method of the Solr PHP library, which accepts a query string, an offset and a 
limit as parameters - the offset and limit work exactly as they do with MySQL 
queries, determining the starting record and the number of results 
respectively. So, in results.PHP, enter the following code under the comment 
that starts '//2. if we have a query term... 


//our required includes 
2 require_once(‘constants.PHP’); 

requ 
104 //instantiate a Solr object 

IB Ssolr = new Apache_Solr_Service(SOLRHOST, SOLRPORT, SOLRNAME); 
@6 //run the query 

$results = $solr->search($query, ©, 10);ire_ 

$ once(‘SolrPHPClient/ Apache/Solr/Service.PHP’); 


19 Checking results 


Now you have a results object, which is stored in $results, First, 
check that the query ran successfully by testing that results is not empty - 
$solr->query will return false if it failed. If all is well, then get the number of 
results, which is stored in $results->response->numFound, and display it 
appropriately. So, under the comment that starts '//3. check the results... 


20 Display results 

By now you'll know whether the query ran and if it has produced any 
results, so the next stage is to iterate through them and display them to the 
user. We are passing the results through htmispecialchars() to make sure any 
special characters in the Solr output are converted to appropriate HTML 
entities. So, in results.PHP enter the following under the comment that starts 
‘1/4. if there are results..’ 


echo ‘<table>’; 
echo ‘<tr><th>ID</th>’ . 
“<th>Name</th>’ . 
“<th>Description</th>’ . 
“<th>Price</th></tr>’ ; 
{ 
foreach($results->response->docs as $doc) 
{ 
echo ‘<tr><td>’ . htmlspecialchars($doc->id) . ‘</td>’ . 
‘<td>’ . htmlspecialchars($doc->product_name) . ‘</td>’. 
‘<td>’ . htmlspecialchars($doc->product_ 
description) . ‘</td>’ . 
‘<td>’ . htmlspecialchars($doc->product_price) . 


‘</td></tr>’; 


E > 
$ 
echo ‘</table>’ ; 


a Error handling 

Finally, you can add a little error handling around the Solr statement 
(this can also be applied to the export.PHP file). As we're connecting to an 
external service (our Solr server), there is an obvious risk that the service may 


The Solr admininterface: query screen 


This is the Solr admin interface screen, which is incredibly useful 
especially when assembling, running and troubleshooting queries 
First make sure you're looking at the right Solr core - select ‘Collection 
1 from the drop-down in the left menu. Then click on ‘Query’ in the 
ubmenu and you should see this screen, which you can use to 


run queries against your index. Not only is this a perfect place to 


experiment with query syntax, you can also tweak query parameters 
and see how they affect results in real-time, The ‘debug’ checkbox 
is particularly useful: check this and you will see an explanation in the 
results of why they are in that particular order - invaluable when you 


are tweaking weightings or experimenting with new query strings. 


Java palaver 
You'll need Java 1.6 or higher to 
run Solr. Chances are it’s 
already there, but if you need 
to download it, it’s available 
from Oracle, IBM or OpenJDK 
- any of these flavours should 
get you up and running. 
be unavailable, causing a fatal error. So here we can wrap the connection in a 
try/catch block, to handle the error and display an appropriate message. 
try 
{ 
00S //instantiate a Solr object 
j4 $solr = new Apache_Solr_Service(SOLRHOST, SOLRPORT, SOLRNAME) ; 
//run the query 
00G results = $solr->search($query, ©, 10); 
} 
@8 catch(Exception $e) 
at i 
//you would probably want to log this error and display an 
appropriate 
//(user friendly) message on a production site 
echo($e->__toString()); 
013 > 
22 Running a search 
You can now browse to localhost/search.PHP and try a search like 
'product_name:Vic' or ™**. This will produce a selection of search results as 
typically found when searching any other site. 
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Check your 
PHP code with 
Codesniffer 


Ensure your code meets standard 
coding guidelines using the impressive 
PHP CodeSniffer tool 


tools |tech| trends A code editor such as Dreamweaver, Sublime or 
Eclipse, PHP CodeSniffer, PEAR 


Download PEAR 

PEAR is a framework and distribution system for reusable PHP 
components, and stands for PHP Extension and Application Repository, and 
PEAR will help us download and configure the CodeSniffer package. 
Download the PEAR phar (PHP archive). Using Terminal, navigate into your 
home directory and execute a curl request to download the required 
application archive files. 


@O1 sudo curl http://pear.php.net/go-pear.phar > go-pear.phar 
PEAR installation 


With the .phar package downloaded into your home directory, you 
now need to run the go-pear.phar script to complete the PEAR package 
installation process. The installation will display some install locations and 
config settings. Choose 1 to change the installation base setting to /usr/local/ 
pear and press Enter to complete the procedure. 


@@i> sudo php qgo-pearphar 
PHP configuration 


08 With the PEAR library downloaded and installed on your machine, we 


finally need to edit the php.ini configuration file to include a path reference to 
the PEAR libraries. Use the Terminal app to navigate to the ini file and use a 
command line editor to include the following line to reference the library: 


Path Variable 

The PEAR package is now installed, but we have a long path name to 
reference when running pear commands in the Terminal. Edit your bash 
profile file, and add the ‘export PATH’ line to the bottom to add an 
environment variable to allow us to access PEAR without typing the complete 
directory location: 
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ode, like any language, is 
something that should be easily 
readable by those who can 
understand it. Ideally, it should 
also still be understandable by 
anyone who isn't fluent in all things 
‘dev’. This stands particularly true 
as we all have our own way of 
writing - our own syntax, layouts 
and formatting preferences, and 
our own personal ticks and 
idiosyncrasies. This is normally easy to manage if 
working on your own, but as soon as you share code 
with a team of developers, each with their own style 
and way of doing things, it can get messy pretty quickly. 
Here we will take a look at PHP CodeSniffer, an open- 
source tool that has standard coding guidelines against 
which you can test your code. You can also extend it to 
create your own custom standard guidelines. May your 
code be formatted and indented to pixel perfection! 


Install CodeSniffer 

With PEAR installed, we can now download the CodeSniffer tool. 
Thankfully, PEAR makes this really easy for us. We simply need to type the 
following command into a Terminal window, and PEAR will download a copy 
of the application from its repository. 


06 Helping hands 

We'll be running the CodeSniffer tool from a command line, so how do 
we find out what commands we can pass to it? Open a Terminal window and 
navigate to the location of your PHP webroot. Once inside the directory simply 
type in the shortcode command for CodeSniffer and hit enter to bring up the 
available commands. 


First Test 


Go ahead and extract the sample files from the resource disc and 
place them directly in your PHP webroot. Let's run our first test on the entire 
directory, although we could specifically choose to test individual files if we 
wished. With Terminal open and in the webroot directory, call CodeSniffer to 
test the current directory. 


Failure 

Our sample file failed the default sniff tests for code layout, hinting and 
commenting standards. CodeSniffer will output a detailed level of information 
for each failure on a file-by-file basis, line-by-line, offering you the solution to 
remedy the errors and to ensure your code passes the tests. 


Matt-Giffords-MacBook-Pro:~ Matt$ sudo php -q go-pear.phar 


Below is a suggested file layout for your new PEAR installation. To 
change individual locations, type the number in front of the 


Wn PAM move peti 208 apart, wasn mar at rom he hing ih as 


MIONE rom/serigts/rwt I] th source “AMONE/sren/scripta/ron” @ This Loads MM into a shel session. 
t PATI unr 
t PATIPAT 


3 spaces but 

| | found 4 
JJ 12 | ERROR | @link tag comment indented incorrectly; expected 
5 spaces but 


| found 6 


Extra detail 

The initial response from CodeSniffer tells us what's wrong, and on 
which line, in which document, which is great - and incredibly useful. We can, 
however, ask for more specific details through reporting options. We'll use one 
of the report options to include the source codes, Run the check again with 
the optional -s parameter: 


gð > phpcs s ./ 
002 


E FILE: /Websites/phptest/WebDesMag. php 
005 FOUND 2 ERROR(S) AFFECTING 2 LINE(S) 


007 10 | ERROR | @author tag comment indented incorrectly; 
expected 3 spaces but 

008 | | found 4 (PEAR.Commenting.FileComment.TagIndent) 
@@9 12 | ERROR | @link tag comment indented incorrectly; siento 
5 spaces but 

| | found 6 (PEAR.Commenting.FileComment .TagIndent) 


directory. Type ‘all’ to change all of them or simply press Enter to 
accept these locations. 


1, Installation base ($prefix) 
2. Temporary directory for processing 
3. Temporary directory for downloads 
ries directory 
code directory ($php_dir) 
jocumentation directory + /Users/Matt/pear/docs 
Data directory + /Users/Matt/pear/data 
User-modifiable configuration files directory : /Users/Matt/pear/cfg 
ublic Web Files directory 
rests directory 
lame of configuration file 


+ /Users/Matt/pear 
: /tmp/pear/install 


: /Users/Matt/pear/share/pear f 


1-11, ‘all! or Enter to continue: I 


10 Finding issues 

In this instance the fix is quite simple. The particular sniff tests we ran 
are quite strict on the spacing of tag comments. Open up the file WebDesMag. 
php and take a look at the top of the document to find the @author and @link 
comments, which have one extra space compared to the others. 


O07 + @category PHP : 
* @package WebDesMag = 
x @author Matt Gifford <nyenailénydonai com 
* @license Enter a valid license here 

E * @link http://dev.monkeh.local/WebDes_Sniffer 
s x Si 


n Fixing problems 

Remove the two extra spaces in the file (one for each problematic tag 
comment). This should bring the comments in line with the rest in the same 
comment block. Run the test again and you should now see nothing returned. 


2 Changing standards 

CodeSniffer comes prepackaged with a number of coding standards 
that we can use to perform the tests. Each one is tailored with slightly different 
tests and requirements for code. By default, the PEAR standard will be used. 
We can see what standards are installed and select a new default for testing. 


> phpcs -i s1 

The installed coding standards- are HySoun PEAR HPCs, 
Squiz and Zend ý 
003 > phpcs --config-set default_standard PHPcS 
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B Reporting format 
When we ran our previous tests in the last few steps we received a 
fairly simplistic report from the sniff tests, which was run by default. What 


we can do this time is set another configuration value to change the default 
reporting style we want to use. Let's change it to return detail using the 
summary format, which will provide us with the source for each error in a 
separate table. 


@01 > phpcs --config-set report_format=summary 


“4 Watching progress 

The diligent CodeSniffer tool, as you will have seen by this point in the 
tutorial, will output the results of any errors or warnings that it picks up at the 
end of its cycle through the code. We can make a change to this in order to 
show us what's happening and what has been discovered as the sniffer runs 
through the code. To do this, you can simply change another configuration 
value via the command line. 


ð > phpcs --config-set show_progress 1 


15 Custom standards 

As a tool to assist in coding guidelines, you can easily create your own 
coding standard to perform your own tests on your code. Each standard is a 
directory structure and an XML file containing test rule sets. Create the 
required directories for your custom standard within the CodeSniffer/ 
Standards directory: 


ðI > cd /path/to/PHP_CodeSniffer/CodeSniffer/Standards 
@@2 > mkdir MyStandard 
@@3 > mkdir MyStandard/Sniffs 


Create RuleSet 


Now we need to create our ruleset.xml file, which can be found 
residing in our custom standard directory. At its most basic, this file will 
inform CodeSniffer that it contains sniff tests that can be run, but we can also 
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extend it to select which tests from other standards we wish to run as part of 
our guidelines. 


BOL <?xml version="1.0"2> 

02 <ruleset name="MyStandard”> 

003 <description>Our new custom coding standard.</description> 
04 </ruleset> 


17 Adding rules 
Let's add some of the existing standards in to our ruleset xml definition 
file for use in our tests. We can pick entire standards including all underlying 
tests but excluding some specific sniffs, and in some cases we can overwrite 
default values to customise the testing boundaries. 


OOL <rule ref=“PEAR”/> 

@@2 <rule ref=“Squiz”> 

003 <exclude name=“Squiz.PHP.CommentedOutCode”/> 
004 </rule> 

@05 <rule ref="Generic.Files,LineLength”> 

006 <properties> 

07 <property name=“lineLimit” value=“90"/> 

@@8 <property name=“absoluteLineLimit” value=“100”"/> 
009 </properties> 

@10 </rule> 


New Sniff 


As well as importing existing sniff tests from other standards, we can 
create our own for use in our custom standard definition. Each sniff is located 
in a sub-directory that relates to its category or function. Create a new file 
called DisallowHashCommentsSniff.php in MyStandards/Sniff/ Commenting. 
We can create the file comment block in the document. 


OAL /xx 
@@2 + This sniff prohibits the use of Perl style hash comments. 
003 « 


004 x PHP version 5 

005 * 

006 x @category PHP 

007 * @package  PHP_CodeSniffer 

008 * @author Matt Gifford <myemail@mydomain. com> 

OOJ * @license http://matrix. squiz.net/developer/tools/php_cs/ 
licence BSD Licence 

010 x @version SVN: $Id: coding-standard-tutorial.xml,v 1.9 
2008-10-09 15:16:47 cweiske Exp $ 

011 * @link http: //pear . php.net/package/PHP_CodeSniffer 
012 vax 


19 Define class 
~ Each sniff test needs to implement the PHP_CodeSniffer_Sniff interface 
to ensure that the correct libraries and packages are run when the tests are 
invoked. The class must also have a descriptive comment block above it for 
clear documentation and readability. 


class MyStandard_Sniffs_Conmenting_DisallowHashConmentsSniff 
implements PHP_CodeSniffer_Sniff 


902 { 
4 } // end class 


20 Register function 

k Next we need to add the register method within the class, which allows 
the sniff to define which of the token types it wants to process in the test. 
When CodeSniffer encounters any of these while running the next sniff test, it 
will process the file and determine where that token type was found and 
inform us. 


public function register() 
{ 
003 return array(T_COMMENT) ; 
004 }//end register() 


‘Sp Process function 

al We're nearly there, but we now need to add the process function. This 
takes a representation of the current file being checked and the position in the 
stack where all of the tokens were found. This will check for the existence of 
the disallowed comment and generate the required error output message 
and stack information 


001 public function process(PHP_CodeSniffer_File 
$stackPtr) 

902 ¢ 
a 
004 
005 


found %s’ ; 

006 $data = array(trim($tokens[$stackPtr] 
C‘content’])); 

007 $phpcsFile->addError($error, $stackPtr, 
$data) ; 

os y 

009 }//end process() 


$phpcsFile, 


$tokens = $phpcsFile->getTokens() ; 
if ($tokens[$stackPtrJ][ ‘content’ ]{@} === ‘#’) { 
$error = ‘Hash comments are prohibited; 


‘Found’ , 


(BB Test File 
ee With our new sniff written in our custom standard, let's create a simple 
PHP file to test the output of our sniff. This will contain a number of ‘illegal’ 


hash comments, which our sniff will be looking for. Create this file in the PHP 
webroot directory in which we are checking. 


<?php 


# This is a standard PHP file 

var $code_message = ‘Code should be readable.’; 
# Output our string message 

echo $code_message; 


?> 


Run sniffs 

With our test file in place, lets run CodeSniffer using our custom coding 
standard, We can either set it as the default standard or define it as an 
argument as part of the command line request. We'll also set an optional 
parameter to obtain verbose output for more information. 


Qi > phpcs -s -v --standard=MyStandard ./ 


24 Check output 


The addition of the verbose parameter gives us a greater level of 
understanding as to what is happening when CodeSniffer performs the tests. 
We can see from the output via the command line how quickly the sniff tests 
were performed and how many tokens were found in each file. 


001 Registering sniffs in MyStandard standard... DONE (1 sniffs 
registered) 

Creating file list... DONE (2 files in queue) 

Changing into directory /Websites/phptest 
004 Processing testfile.php [24 tokens in 8 lines]... DONE in < 1 
second (2 errors, © warnings) 
@05 Processing WebDesMag.php [107 tokens in 56 
DONE in < 1 second (1 errors, @ warnings) 


lines]... 


Sniff success 

Our custom standard and sniff tests were processed against the files 
in the specified directory, and we can see from the results that the prohibited 
hash comments were found in our test file. We can now easily fix our code. 


001 FILE: /Websites/phptest/testfile.php 
FOUND 2 ERROR(S) AFFECTING 2 LINE(S) 


3 | ERROR | Hash comments are prohibited; found # This is a 
standard PHP file 
005 | | (MyStandard. Commenting. 
DisallowHashComments . Found) 


@06 5 | ERROR | Hash comments are prohibited; found # Output 
our string message 
oo7 ı | (MyStandard. Commenting. DisallowHashComments. 


Found). 


© Each sniff test needs to 
implement the PHP Code 
Sniffer_Sniff interface #3 
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Create efficient 
websites using 
Page Visibility 


Learn a few techniques to create a 
responsive website that efficiently 
handles being out of sight with the 
power-saving Page Visibility API 


tools |tech|trends HTML, jQuery, JavaScript, text editor, Page Visibility More Efficient. 


Pages.zip 


006 } else if ( typeof document.mozHidden !== 
‘undefined’ ) { 
prefix = ‘moz'; 
} else if ( typeof document.msHidden !== 


oO Adding the listener 

It's incredibly easy to start using the Page 
Visibility API; if you've ever added a click handler this 
syntax will look very familiar. The visibilitychange event 


is triggered by several actions: when a user navigates ‘undefined’ ) { 
to/from the tab your site is in, when the browser is prefix = ‘ms’; 
minimised and when the OS is locked } else { 
window.alert(‘Your browser doesn't support 
gi document .addEventListener( the Page 
‘visibilitychange', function() { Visibility API'); 
2 //do stuff return; 
}, false); } 


/* jQuery way */ 
$(document).on( ‘visibilitychange', 
function() { 


A //do stuff 
dv; 


02 Catering for all browsers 

Of course, this wouldn't be web development if it 
were that easy. Currently, most of the browsers that 
support the Page Visibility API do so with their own 
vendor prefix (except Opera). To account for this we can 
quickly check if the prefixed version is undefined or not. 


03 Helping ourselves 

Right, we've now determined if the browser 
supports the API and which vendor prefix to use. To use 
this data though, we need to check the Boolean value 
of document.hidden. We could check for each prefix like 
if document.hidden || document.webkitHidden ||, etc), 
but that could quickly get tiring for our fingers. Instead, 
we've written a function to prevent RSI. 


001 function isHidden() { 
002 if ( prefix === ‘' || typeof document. 
hidden !== 
‘undefined’ ) { 
return document .hidden; 
5 } else if ( prefix === ‘webkit’ || typeof 
document. 
webkitHidden !== ‘undefined’ ) { 
005 return document .webkitHidden; 
006 } else if ( prefix ‘moz’ || typeof 


var prefix; 
if ( typeof document.hidden !== ‘undefined’ 


ns 

003 prefix = ‘'; 

} else if ( typeof document.webkitHidden 
!== ‘undefined’ ) { 

005 prefix = ‘webkit’; 


204 Web Design Tips, Tricks, & Fixes 


e've had tabbed browsing 
for about a decade. Most 
users are familiar with the 
idea of having more than 
one website open at a time, 
but it's hard to deduce 
when your site actually has 
their attention. Traditional 
‘hacks’ are to attach an 
onblur or onfocus listener, 
but these are far from 
flawless as they often give false positives. 

Enter the Page Visibility API. Although this JS API is still 
in its infancy, it's ‘a means for site developers to 
programmatically determine the current visibility state of 
the page in order to develop power and CPU-efficient 
web applications. It's currently a W3C Candidate 
Recommendation which has been championed by 
Microsoft and Google, so it's not surprising to find it's 
supported in Chrome 13 and will be supported in IE10, as 
well as Firefox 10 and Opera 1210. In this tutorial we'll 
pause and play a video; prevent erroneous visits being 
added to page analytics; and stop Ajax requests until the 
user returns, saving greatly on server load. 


document .mozHidden 

!== ‘undefined’ ) { 

007 return document.mozHidden; 

008 } else if ( prefix === ‘ms’ || typeof 
document .msHidden !== ‘undefined’ ) { 


009 return document.msHidden; 


010 } else { 


4 return null; 
} 


013 } 
04 The universal approach 


With that in place we can simply call that 
function to determine the page's visibility. You'll 
probably notice we have explicitly checked if hidden is 
false as opposed to the shorthand !isHiddenQ because 
that would evaluate as true if isHiddenQ returned null. 


ÖT document. addeventListener( prefix + 
‘visibilitychange', 
function(event) { 


if ( isHidden() ) { 


} else if ( isHidden() === false) { 


004 } 


}, false); 


Video HTML 


Now were starting to get to grips with the Page 
Visibility API it's time to actually begin doing something 
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This version: 
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Page Visibility API tutorial 


Abstract 


‘This specification defines a means for site developers to programmatically determine the current visibility state of the page in order to develop 


efficient web applications. 


Status of this document 


This section describes the status ofthis document al the time ofits publication. Other documents may supersede this document. A jist of cumani 


with it. To kick things off, we're first going to be pausing 
and playing a video when the user visits a different tab. 
We'll start by writing the HTML for the video and 
include the visibilityjs script 


OOI <video width="550" height=“360" controls 
autoplay> 

@@2 <source src=“my-video.webm” type=“video/ 
webm; 

codecs=‘vp8.0, vorbis'"> 

@@3 <source src=“my-video.mp4” type=“video/ 
mp4; 

codecs=‘avc1.4D401E, mp4a.40.2'"> 

@04 <source src=“my-video.ogv” type=‘video/ 
ogg; codecs=“theora 

vorbis” '> 

005 <p>Your browser can't play this video 


e000 Page Visibility API tutorial ca 
sees oie 1 Pace vist corns 
= A a 


Page Visibility API tutorial 


3:08/9:56 *)) 


Big Buck Bunny 


-00e $a 0 OD BB berejen 


from topleft> 


<Clockwise' 
+ Although atad dry, it's well worth reading up on the W3C spec - it tells you most of what 
you need toknow and can really help you out if you get stuck 


+ Page not in view: evidence that our JavaScript is up and running by switching between tabs 


+ In view! Now to deliver all that rich content we've been saving up... 


+ The video player will automatically play and pause depending on the visibility of the page 


(</p> 
006 </video> 
007 <script src=“visibility. js"></script> 


Controlling the video 

HTML5 video allows us to control its playback 
with JavaScript through its own very simple API. We're 
going to be using two of its methods: playO and pause). 
To use these we need to lock on to the video's node; 
this assumes it's the only video element on the page by 
getting the first in the list. 


@01 var video = document. 
getElementsByTagName(‘video')[0]; 

002 document. addEventListener( prefix + 
‘visibilitychange’ , 

function(event) { 


003 if ( isHidden() ) { 

004 video. pause() ; 

005 } else if ( isHidden() === false ) { 
006 video. play(); 

007 } 

008 }, false); 


07 Pause fora moment 
This has the desired effect! Marvel as you never 
miss a frame of video playback again. Unfortunately, our 
implementation will pause and start it even if the video 
has already been watched or was paused by the user. 
To get around this we are going to check if the video is 
paused at the point they navigate away from the page. 


@@1 if ( isHidden() ) { 
@@2 paused = video. paused; 


Web Design Tips, Tricks, & Fixes 205 


+ video. pause(); 
} 


08 Play it again... 

In the previous step we used a property called 
paused to check whether or not the video was stopped; 
we're now going to use some other properties specific 
to the video tag to make an educated guess as to 
whether the video should be played when the user 
navigates back to our site. 


Bl if ( video.currentTime > @ && !paused && 
!video.ended ) { 


5 video. play(); 
} 


Let’s recap 
Great! We should now have a video that only 
plays if it was playing, wasn't paused and hasn't ended. 
This is a good example of progressive enhancement 
where - if the technology Is available - we can add extra 
levels of functionality to make users lives a little easier. 
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10 Visibility state 

As well as document.hidden the Page Visibility 
API also adds another attribute: document.isibilityState. 
This has four possible values: visible, hidden, unloaded 
and prerender. Like hidden, it’s currently vendor prefixed 
so let's first make a similar function to isHidden( that 
deals with this. 


function visibilityState() { 
if ( prefix === ‘' || typeof document. 
hidden 
!==\‘undefined’ ) { 
return document .visibilityState; 
} else if ( prefix ‘webkit’ || typeof 
document. 
webkitHidden !== ‘undefined’ ) { 
return document .webkitVisibilityState; 
} else if ( prefix === ‘moz’ || typeof 
document .mozHidden 
l== ‘undefined’ ) { 
return document .mozVisibilityState; 
H } else if ( prefix === ‘ms’ || typeof 


D ~ Í Enter address or search A 


Power-efficient 
web development 


The Page Visibility API could be 
used in conjunction with the 
Battery API (http://www.w3.org/ 
TR/battery-status/) to reduce 


site functionality when a 
device is running low 
on power 


document .msHidden !== ‘undefined’ ) { 
return document.msVisibilityState; 
} else { 
return null; 
} 
} 


n Verifying analytics 

When looking at visibilityState the first two 
values make sense, but prerender is a little bit weirder. 
Some browsers (such as Chrome) pre-render pages that 


they think the user is going to click on in order to speed 
up browsing. Because this counts as a page view it can 
skew analytics into thinking that they're getting more 
views than they really are. However, we can fix this with 
the Page Visibility API. 


if ( visibilityState() !== 
//your analytics code 


} 


2 How long? 


You might also find it useful to work out how long 
a user has been away from your website - either for 
analytics or to modify an element of your page in some 
way. When the visibilitychange event is fired it gives us a 
number of properties - one of which is the timestamp for 
when the event occurred. 


‘prerender' ) { 


if ( isHidden() ) { 
timeAway = new Date(event.timeStamp) ; 
} 


We missed you... 

We've used JavaScript's built-in Date object so 
that we can work with the UNIX timestamp. To calculate 
how long they were away we can simply subtract one 
date from the other. We're also dividing It by 1,000 to 
convert milliseconds to seconds and rounding the result 
up to make it more readable. 


} else if ( isHidden() === false ) { 
var delta = new Date(event.timeStamp) - 
timeAway ; 
@@3 window. alert(‘You were away for ' + Math. 
round(delta / 
1000) + ‘ seconds’); 


604 > 
“m Changing the title 


This only fires when they leave and come back, 
but what if you want to do something on your site once 
the user has been away for a certain amount of time? 
We can use setInterval() to check how long they've 
been gone. If the user is away for, say, ten minutes, we 
change the title to ‘Close met 


setInterval(function() { 

var delta = Date.now() - timeAway; 
if ( delta > 600000 ) { 
document.title = ‘Close me!'; 
clearInterval( this ); 

} 

}, 10000); 


5 Reverting the title 

Once they come back, we want to change the 
title back to what it was; you can do this with a simple if 
statement. It's worth noting that just because we can do 
things like this it doesn't mean we necessarily should. 
Adding a setinterval when a page isn't being viewed is 


extra load on the CPU, but on the other hand, it does 
offer developers some extra creativity. 


if (document.title !== ‘Page Visibility API 
tutorial’) { 
GBB document.title = ‘Page Visibility API 
tutorial’; 


a: 
} 


16 Turning to Ajax 

Okay, so the last example was a bit gimmicky 
- it's unlikely many web developers are going to start 
encouraging people to close their page after they've 
been gone for ten minutes! Perhaps a more useful 
application of the Page Visibility API is to stop Ajax 
requests when they're not needed. 


| } else if ( isHidden() === false ) { 


var requests = [], 


makeRequests ; 
function getSomething() { 
} 
unction stopRequests() { 
} 
v This was a triumph 


The requests variable is going to store all 
requests (ideally you'd remove requests once they've 
been completed). We're going to use jQuery’s ajax 
method for its simplicity. Within the getSomething(Q) 
function, add: 


var request = $.ajax({ 

url: ' HYPERLINK "http://lab. fetimo.com/ 
pagevis/resource, 
json'” http: //mysite.com/resource. json’, 

success: function(response) { 

$('body').append(response.message + 
"<br>'); 

3 

D; 

requests.push(request) ; 


Cancel that 

jQuery has a handy property called beforeSend 
on its ajax method which lets you - among other things 
- set custom headers and, ultimately, decide if the 
request should be made. We'll use this to only send a 
request if the page is visible by returning false if the 
page is hidden; returning false stops the request from 
being made. 


request = $.ajax({ 
beforeSend: function() { 
if ( isHidden() ) { 
stopRequests(); 
return false; 
t 
}, 


19 Setting intervals 

To simulate an Ajax-style application making 
many requests we'll set up a setinterval to make a 
request every second within getSomething0). We assign 
it to a variable so that we can clear it in the next step 

- otherwise it would be making requests for ever! We 
also don't want multiple timers, so it has been wrapped 
in an if statement. 


if ( !makeRequests ) { 
makeRequests = setInterval(function() { 
getSomething(); 
}, 1000); 
} 


20 Next, we'll write what stopRequests() is meant to 
do, We will loop through the array and use jQuery's 
abort() function on each of the active connections. We'll 
then clear the interval that emulates an application 
making requests for us and reset the variable to be 
undefined; if we didn't do this it would remain as the ID 
of the setinterval. 


requests. forEach(function( request ) { — 
request. abort() ; S 
OE A Ae 
clearInterval( makeRequests ); 
makeRequests = undefined; 


a Initialise requests 

The last thing to do is initialise getSomethingO to 
start making requests both when the page is visible and 
on initial page load. This will complete emulating a 
JavaScript app making requests so that we can see the 
effect of our dabbling with the Page: Visibility API. 


eae 


oe 


} else if ( isHidden() === false ) { 
getSomething(); 
} 
}, false); //close event listener 
getSomething(); 


@ Tidyingup 


Now that we know this works you can change 
the requests array from storing every request made to 
just active ones by removing them on request 
completion. If you know you only ever make one 
request at a time you can simply do request.pop0); 
however, here we're going to compare each element in 
the array and see if it's exactly the same as the variable 
in memory. 


complete: function() { 
requests. forEach(function( req, i ) { 
if ( req === request ) { 
requests.splice( i, 1 ); 


D; 
} 
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AmA 


Make pixel 
based sites 
responsive 


Responsive sites are the musthave in 

this multiscreen environment, and we 

show you how to take an existing site 
nd convert it over with just a 

inkling of CSS 


tools | tech | trends Dreamweaver 


Sourcefiles 


+ Start folder 
«Finished folder 


Getting started 


Copy the Start folder to your computer and 
open the index.html page in your browser. It's a simple 
two-column, static layout for a 128Opx desktop screen. 
Open the style.css file in Dreamweaver to prepare us to 
covert this to a percentage-based design. In the body 
CSS change the line height from pixel-based to 


M 


Respondo 


em-based and add the font-size property. 


@@1 line-height: 1.2em; 
002 
003 font-size: 100%; 


Fix the header 
An em is a relative unit, not fixed, so it can scale 
up and down easier. Some conversion techniques to 
responsive sites change padding to percentages, but it's 
not really necessary to do this. Find the header rule and 
change the width from a fixed 1280px to 100% so that it 
stretches across the screen 


OOL width: 100%; 


Change the footer 

If you test in the browser now, we can see that 
we've made the header stretch full-width across the 
design. As the logo and header is small it will fit in small 
screen mobile designs as well as the desktop. Let's 
make that same change within the footer, find the footer 
rule, and change its width. 


@Q1 width: 100%; 
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ometimes design jobs can seem like 
they are too difficult, mainly because 
you've just never encountered those 
problems before and you think they're 
going to bea chore. Responsive design 
is something you might have read about 
but never taken the plunge into - or 
maybe you've built a site in a tutorial, but 
you don't want to tackle it on your own 
site because you think it involves a 
redesign. The truth is that if you have an 
existing site, most of the work is actually done. 

It's incredibly simple to move a site over to a responsive 
layout, mainly because you're just changing widths into 
percentages. Doing that alone will make it scale up and 
down to fit any screen size - but then there's the difficulty of 
what happens when the columns get too small and images 
break out of the design. All of this is relatively easy to fix 
-= images can be scaled easily enough, and when a design 
gets too small we can use media queries to fix them into a 
single-column design 

So the good news is that it's not impossible, and in this 
tutorial we are going to take a prebuilt page and show just 
how easy it is to convert it across to a responsive design. 


04 Centring the design 

The header and the footer stretch across the 
screen - let's focus on the menu. This is actually much 
easier to do as it’s an inline-block. Find the menu ul rule 
and remove the width property so that the rule 
resembles the code shown below. If you save this and 
test it in the browser you will see that it displays across 
the full width of the screen. 


001 #menu ul { 

002 

003 margin: 0; 

004 

005 padding: 10px; 
o 

007 list-style: none; 
008 

@09 color: #333; 

010 

@11 background:#555 url(img/noise.png) ; 
012 

@13 overflow: hidden; 
014 

015 } 


Centre the text 

The text area in the screen is aligned to the left 
while everything else fills the width of the browser. Now 
change the content rule as follows. This subtle difference 
to the width means it will hold at 128Opx but collapse if 
necessary, which is important later. We add the auto 
property to the margin so that it centres left and right. 
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<Clockwise from topleft> 


+The initial design has been created already to show how easy the process is to convert a website with pixel values to a responsive layout 


«Simple percentage changes make the header of the document stretch fullscreen and take advantage of the full browser width. The advantage is that this works for downscaling also 
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+The initial part of the design challenge is to extend areas of the design to fill the browser. Here the menu has been extended 


+ Once pixel-based positioning has been removed the design scales up and down to fit the browser. Using max-width ensures we have a fixed upper size to work to 


OOT max-width: 128@px; 
002 
@03 margin: 20px auto; 


Not scaling 

If you test out the design so far then you will 
quickly see that the design is centred but does not 
scale if you try to resize it. That's because the sidebar 
and the main divs both have pixel-based values. To 
convert it we use the equation devised by Ethan 
Marcotte, who first proposed responsive design. This is 
shown below and applied to 768 pixels of the main 
section. Don't add this yet. 


@@1 target divided by context = result 
002 768 divided by 1280 = 0.6 


Change to percent 

0.6 isn't very clear as a percentage, but if we 
move the decimal place two places to the right we get 
60%. That's better, so let's add this to the main div 
content. If you test it, the design should look the same, 


because it's the same width displayed as a percentage. 
It won't scale properly until we change the sidebar. 


OOI width: 60%; 


Convert the sidebar 


Find the sidebar CSS rule and change the width 


and margin as shown below. As you can see the width 


003 background: #399 url(img/noise.png) ; 
005 float: left; 
006 


a margin: © @ 20px 1%; 


009 padding: 0; 
10 


It's incredibly simple to move a site over 


to aresponsive layout 


of the main area plus the sidebar plus the margin adds 
up to 100%. We didn't really need the equation here 
because we had to make it add up to 100%, but if you 
try it, you'll see it works. 


BAT .sidebar{ 
002 


OTI width: 39%; 
013 } 
® Scaling the image 


=" Save and test in the browser. You can now scale 
the design down, but as you can see when the browser 
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Cmon -width 


} Respondo 


main -textarea ( 
color: #222 

margin-right: 2%; 
padding: © 2x 0 2%; 


sidebor{ 


‘background #399 url(img/noise.png). 
float: Left: 


«When the sidebar moves over the image it covers it, so the image has be fixed - allowing it to be responsive also 


«Giving the image a width of 100% but also a maximum width ensures that it scales up and down yet remains within the design 


+Using media queries the sidebar is moved below the main content when the screen width gets too narrow 


+The text is made to fit the full width of the screen on smaller devices. This is true for the sidebar and the main text 


+The menu is given special treatment on mobile-sized screens so that it can be easily tapped while the user is on the go 


is small, the sidebar overlaps the image. Let's make the 
image responsive as well; find the img CSS rule and 
change it as shown. This makes the image never bigger 
than 540px, and it will scale up and down. 


Create a tablet layout 


Save and test the design - you will see how the 
text automatically runs around the image until the width 
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of the column gets too small. It's when that happens 
that the image scales properly. Obviously as the design 
gets too small the columns do not really work, so let's 
create a media query in the CSS. Add this to the bottom 
of the CSS: 


u Moving the sidebar 

This media query is going to detect when the 
width is 768 pixels wide or less, and we will adjust the 
design for a portrait tablet. Inside the query lets update 


GoL. 
An -textarea { 


padding: 10px: 
font-weight bold; 
pac 9b(S1, 51,51) 


background 
colors PY: 


7680) { 


the sidebar so that it jumps below the main content 
area and has a wider value than it currently does. Add 
the code as shown below, which overrides the width on 
the first sidebar rule. 


Fix the main section 


If you test the design now you will see that the 
sidebar works fine; it jumps down and fills the width of 
the browser. The text in the single column however, is 
only 60% of the browser - but this is easy to fix. Again 
inside the media query add this code, which ensures 
the design uses the full width of the browser. 


B Reset the margins 

A small clean up is required here before 
continuing. The margins are set for the design at 
desktop level, so let's remove them in the smaller tablet 
size. Again inside the media query add the following 
code, which will just reset the margins for the text area. 
Save this and give it a test in the browser. 


“4 Detecting mobile phones 

The design scales really well, but as you get 
down to phone size notice how the menu is the area 
that struggles; it's quite small for fingers on a mobile, as 
is the text size to read. Add another media query below 
the first that will detect when the screen starts to get 
smaller again. 


5 Larger text 

When using a mobile phone, the text for desktop 
browsing tends to be quite small on the handset. We are 
going to increase our body size up to 120%. The good 
news is that everything will be proportionally bumped- 
up because we have used flexible em sizes instead of 
pixels. Add the code shown below into the media query 


from the previous step. 


Extend the sidebar 

If you check the design in the browser, you will 
see that there is some margin space around the sidebar. 
We don't need this on mobile as we can take advantage 
of the full width of the browser in the smaller screen 
estate. Add the following code into the media query to 
change the size of the sidebar box. 


7 Change the menu layout 

To make the menu easier to click for a mobile 
device, it's usually a good idea to add the menu as a 
regular list down the page. To switch it back we just 
need to override the inline-block setting for the display, 
so instead we'll change it to block. Add the code shown 
below to the media query. 


Needs to be a button 

The buttons are now in a regular list giving more 
space to them, but they do not look like buttons. Adding 
the code shown to the menu li CSS rule will add a 
border line to the bottom of each button and therefore 
add some definition of the area that's clickable for each 
of the buttons. 


Still needs work 

The buttons definitely look much better now as 
the dividing lines have defined each area making it a 
button. The text still looks a little odd on the buttons 
and that is because the text is aligned to the left. Let's 
centre the text on the buttons, giving the ‘menu |i’ more 
impact on the screen. 


20 Finishing touches 

The last refinement we need to make for the 
buttons list items is to give them a little more space for 
each of the buttons which can be achieved simply by 
adding a little padding to the menu li CSS rule. Adding 
the padding will help fingers to press each button easier 
on the smaller screen. 


Full width 


In order to make the buttons take full advantage 
of the width of the display, as with the other areas of the 
site's design, we need to remove any padding and 
margins from the outer container. In this case it happens 


to be the unordered list, so add the code shown below 
to the media query. 


Save and test 

Now that we've added all of the code to the CSS, 
save the file and open the HTML page in the browser 
again. We now have a fully responsive design that scales 
to differing widths, but has break points (the media 
queries) that allow the design to reflow as the width of 
the device it is viewed on shrinks. 


Analytics to 
the rescue 


If you use any form of 
analytics you will be able 
to see what devices and 
screen sizes are targeting 

your site, Aim your 
responsive designs at 
these resolutions first 


Flowing text around 


images 


You will have noticed from the d 
the webpage that we are flowi 
around theim 
been done specifically to show that text 
and image combinations can work 
together within a responsive de 
image was floated to the left in order to 
make the text flow around the image. As 
the column reduces downin percent 
when either the browser is resized or 
ated to on smaller devices, then the 
text becomes squashed in. It’s not ideal to 
have the text too thin at the edge of the 
image so look at your break points in the 
media queriesand try and find a good fit 
for the image. Of cours 


to say you need to ma ur text flow 


around an image at all 
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Test code 
continuously 
using Sismo 


Learn how to easily test your PHP 
projects using SensioLabs excellent 
Sismo suite 


tools | tech | trends PHP 5.3+, Sismo, PHPUnit, Git, GitHub account 


Download Sismo 

To start off we need to download the Sismo software, which can be 
found at sismo.sensiolabs.org. Sismo is quite simply just one PHP file, but 
don't be fooled, its a very powerful little tool. Place the file into the web 
directory of your project. 


Install PEAR 

Youll also need to have the PEAR package manager installed if you 
don't already. For Windows users, run the file shown from the search bar, for 
OS X and Linux users, you'll need to run them from a terminal window, We 
need to do this, as this is how we will install PHPUnit, which is to be our testing 
software that we'll use. 


Install PHPUnit 

Once you have PEAR set up its time to install PHPUnit. PHPUnit is one 
of the most popular unit testers for PHP, and is a valuable tool to have. Back in 
terminal, enter the commands below to start the installation. 


04 Example test for PHPUnit 

When you write your tests for PHPUnit, you extend the main PHPUnit 
class and then place your test methods inside that. It's normal to keep your 
tests in a separate folder to the rest of your app. 
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K KK 


esting code is something that every 
developer has to do to ensure a 
quality product on completion of a 
project. Most coders when they start 
off testing just manually follow the 
procedure of the code and try to find 
where the issue is, possibly echoing 
out a few variables here and there. 
While this works fine sometimes, for 
larger projects or projects you have inherited from other 
developers it can be a time consuming and frustrating 
process. Thankfully there are lots of tools available to help 
simplify testing, and to find bugs as soon as they are 
introduced. PHP is no different, and has apps such as 
SimpleTest or PHPUnit. SensioLabs have been making 
waves with their modern Symfony2 framework and the 
associated modules, and recently released the Sismo 
testing suite. Sismo is a continuous testing server that is 
written in PHP, but can integrate with any language. All 
you need to do is tell it what program you are using to 
test within the config file. This tutorial will show you how 
to test your PHP projects using Sismo, Git and PHPUnit. 


Main test methods 

If you are not used to unit testing, then now is a good time to take a 
look at how it works and why you really should do it. Unit testing means 
writing code that verifies the output of your main app code. You write tests for 
each section of your code, until your entire project is covered. You can then 
run all the tests as one when implementing new features to quickly find bugs 
across the entire project. 


06 Testing main test methods 

When writing unit tests, you need to break each method down into 
goals. Here we simply confirm that the variable we are testing contains the 
string ‘This is my var’. If it does not, then the test fails. 


Second method 

As another example of a unit test method, we can test that we have 
the correct amount of elements within an array by calling the assertCount 
method. This test would clearly fail, as we are asserting that we have 12 
elements, when we only have three within our array. 


<Clockwise trom top left> 
+ Sismo Is free and open source, and can be downloaded from the SensioLabs site. 


+ Installation is done using the PEAR package manager, which Is used for many other PHP. 
libraries, 


+ The main web interface is attractive, but most of the work can be done using Just the console. 


@@1 public function testAmount() 


002 { 
003 $this->assertCount(12, array(‘myString’ , 
‘anotherString’ , ‘etc')); 
004 3} 
Test out Sismo 


We need to create a config file for Sismo to read from. As Sismo is one 
file, we have to make the directory and file contents ourselves. It's easiest with 


Terminal. Navigate on the command line to the folder you placed Sismo in. 


Create config directory 
In Terminal enter the commands below. This creates our config 
directory and then a PHP config file that we will populate with our settings. 


Sismo is straightforward, but there are a few handy settings you can tweak. 


OOL mkdir ~/.sismo 
02 cd ~/.sismo 
@@3 touch config.php 


Start config.php 

Now edit the config.php file to contain the settings with which we need 
to work. Start off by creating a new array called $projects, then we can add a 
notification system. Uncomment the notifier variable relevant to your OS. 


ÖL <?php 

02 

003 

004 $projects = array(); 

For OS X use the Growl notification system on test end 
901 $notifier = $notifier = new Sismo\Notifier\ 
GrowlNotifier(‘pa$$word'); 


For Linux, use Dbus notifications 
OOL $notifier = new Sismo\Notifier\DBusNotifier(); 


Add your Git repos 

Sismo works with Git repositories, so you will need to have a local and 
GitHub hosted repo to get the most out of the testing suite, Replace the 
relevant values in the code below with your own repos. 


OOI $projects[] = new Sismo\GithubProject(‘myLocalProject’, ‘/ 
Users/kiksy/myProj’, $notifier); 

002 

003 $projects[] = new Sismo\GithubProject(‘myProj’, ‘kiksy/ 
myProj’, $notifier); 


Project settings 
Then we need to add a new project to our Sismo object. Once we have 
done that we can set our remote repository location, this will be somewhere 
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on github.com. The branch that you will need is most likely master, but you 
can obviously get this to your own branch you're working on. 


$myProj = new Sismo\Project(‘myProj'); 
| $myProj->setReposi tory ( ‘https: //github.con/kiksy/myProj.git’); 
‘$myProj->setBranch(‘master'); 


B Remaining project settings 

The last settings we need to add make up the command that will run to 
start your tests. As we are using PHPUnit, it links to the script to run that. You 
can switch this out though and change it for any testing software that you 
want to use for your specific language. Finally we add the commit route and 
return our $project variable. 


_ $myProj->setCommand(‘./vendors.sh; phpunit’); 
- $myProj->setSlug(‘symfony-local'); 
‘$myProj->setUr1Pattern( ‘https: //github.com/kiksy/myProj/ 
conmit/Xconmit%’'); 
$myProj->addNotifier($notifier) ; 
$projects[] = $myProj; 


return $projects; 


“u Changing the config file location 

As the config file is very specific for one project, and the default 
location is set to be within the root of the user directory, you may want to 
move it - perhaps to the bottom of the project directory. That way you can 
run multiple Sismo tests on the same machine for different projects. Simply 
run this command to do so: 


øði php sismo.php --config-file=.sismo/config.php 


aaa 


teattest kieronhoward$ php sismo.php --config-file=.sismo/config.php 
Sismo version 0.999999 


nage: 
{options} command (arguments) 

Options: 
~help -ħ Display this help message. 
quiet -q Do not output any message. 
~-verbose -v Increase verbosity of messages 
=-version -V Display this application version 
~-ansi Force ANSI output. 
--no-ansi Disable ANSI output. 


output Displays the latest output for a project 
kieron-howard:testtest kieronhowards || 


» RunSismo test 
Open the browser and go to localhost/myProj/sismo.php - you should 
then see the main Sismo report page. This is where the updates will come on 
the status of each test and whether or not they have passed. The actual 
running of the tests is done from the command line. 


myProj 
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16 Run your unit test 

The next thing we need to do is run our unit test and see the end result. 
Make sure you are in the correct directory within your project and then run the 
command below. In your browser you should then see the results of the test. 


@@2 php sismo.php build 


Possible issues 

While Sismo is fairly easy to set up, it is possible to come into some 
problems. Even if you don't use it, Sismo is dependent on SQLite3, and so this 
needs to be installed before Sismo will successfully run. While OS X mostly 
comes installed with SQLite, some of the Linux flavours don't. Run the below 
to start the installation. 


sudo apt-get install php5-cli php5-dev make 
sudo apt-get install libsqlite3-0 libsqlite3-dev 
sudo apt-get install php5-sqlite3 

sudo apt-get remove php5-sqlite3 

gi~ 

wget http://pecl.php.net/get/sqlite3-0.6.tgz 


Make SQLite3 

After the wget command has finished downloading the tar ball, you 
need to unzip it and then build the extension from the source. After that the 
final command will restart Apache. If this doesn't work for you, you can also 
try ‘apt-get install php5-sqlite’. 


$ tar -zxf sqlite3-0.6.tgz 
$ cd sqlite3-0.6/ 

$ sudo phpize 

$ sudo ./configure 

$ sudo make 

$ sudo make install 

$ sudo apache2ctl restart 


19 More descriptive output 

To make Sismo output more information from the command line, 
either to debug the installation or to find out more on the state of your builds, 
you can use the --verbose switch when running Sismo. Just enter the 
command below. 


001 php sismo.php build --verbose 


Farmina — bal 


Ainron-howarditertteat Kieronhovard® php shome-php build -verbose 1 
Duliding Project “nyProject™ (into "bI72aa") 

(ozn tanning “ait toton origi’ 

n| manning “it submodsle update -init -recursive 

|oin| manning “git checkout 'origin/maatar "= 


| MEAD ds now at 2004347... Initial commit 


Running “git rosat bard 20e42a7abc70%0d18@64b019cte2e0atett90S65'" 
ani BRAD ia nov at 20043a7 initial commit 

t| monning "git shov -e —-pretty-torants "AiNatantatci\ntetn' "20e4347ebo709ed1 9464D018cOeZe0abetseses'* 
Out] 20643a7abe709cd19464b019c00200a602 £90565 


our) 
lagel aota-oe-o1 iasanaa -0700 
OuT| initial comit 

{om 

ullding Project “nyPro}" (into "b7720a") 
[manning “aie eteh 


(E sen 3th com 
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[ae] Soot creas de ae 
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|our| 2012-00-01 11:54:22 -0700 
Initia) comit 


20 Silence Sismo 

“= Alternatively, if you are logging the results of the tests, you might 
not want Sismo to output so much information. In this case you can tell 
Sismo to be quiet, simply by using the -q or --quiet switch. If at any time 
you get stuck, you can also use -h to get help on a topic. 


001 php sismo.php build --quiet 


a Extending Sismo 
» As mentioned earlier, the default 
location for the config file is in the root of 


your own personal user directory. This 
isn't great if you have lots and lots and 
lots of projects on the go at one 

time, or if you are working remotely 
on a project, perhaps one with 
multiple branches. SismoFinder is a 
simple wrapper to solve that 

problem for you. 


OI git clone https://github. 
com/havvg/SismoFinder.git 


22 SismoFinder config 

i You then just need to replace the Sismo 
config file with the following code. This autoloads the project into the 
correct directory and saves time. You can also continue to use the 
other settings such as the choice of notifications. 


OOT $loader = new Symfony\Component\ClassLoader\ 
UniversalClassLoader () ; 

002 $loader->registerNamespaces(array( 

003 “SismoFinder’ => ‘/Users/kiksy/myProjSismoFinder/ 
sre’, 

004 >); 

005 $loader->register(); 

007 $finder = new SismoFinder\Finder(); 

008 $f inder->addWorkspace( ‘/Users/kiksy/myProj') ; 
009 

@1@ return $finder->getProjects(); 


K kiksy@kiksy VirtualBox 


SA README md 


» SismoFinder 


Code library 
The Sismo PHP config code 


The Sismo.php config file is the only thing you need to add to start using the 
continuous testing server 


Youcan set your Sismo OOL //$notifier = $notifier = new Sismo\ 


toreport on local or ifi ifi ‘ "y. 
EAE CHUGH NORLFLEPNGFONINOELP ier( password i 
projectsby entering 002 //$notifier = new Sismo\Notifier\ 
theirnameandlocation  DBusNotifier(); 

at this point. 003 


004 $projects[] = new Sismo\ 
GithubProject(‘myLocalProject’, ‘/Users/kiksy/ 
myProj', $notifier); 

005 $projects[] = new Sismo\ 
GithubProject(‘myProj', ‘kiksy/myProj', 
$notifier); 

006 

07 $myProj = new Sismo\Project(‘myProj'); 

08 $myProj->setRepository( ‘https: //github.com/ 
TheGitHubrepositoryis  kiksy/myProj.git'); 


sethere.Makesuretoadd §@9 $myProj->setBranch(‘master’); 
the gitat the end, in the 


same way you would 010 
clonearepo. Q@11 $myProj->setCommand(“ ./vendors. sh; 
phpunit'); 
012 $myProj->setSlug(‘symfony-local'); 
Finally, we EN an 013 $myProj->setUrlPattern(‘https://github.com/ 
array of projects for r f 2 Veta: 
Sismoto monitor. Ifthe kiksy/myProj/commit/%conmit%") ; 
projects are not valid, 014 $myProj->addNotifier ($notifier) ; 
then Sismo willlet you @15 $projects[] = Proj: 
know they have failed in Soro} CIS APES; 
the terminal window. 016 


@17 return $projects; 
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Deploy alive 
site using Git 


Learn how to deploy sites using the Git 
version control system, allowing for 
easy branching and rollbacks 


tools | tech | trends Git, GitHub.com, Terminal, SSH access to the live/ 
dev/staging server 


o Sign up for Git 

The first thing you will need is a Git account. Signing up for public 
repositories is free. If you want to keep them private you'll need a paid 
account, but the rates are very reasonable. Go to: github.com/plans. 


C 


a A oree E n: 
github ve tty ten ee Paty tene f 
on ia br Gs per 

Oe i o ii trate | 
nana your tao poeana asenu | 
— EEE morta seme 1: | 
= ; AENA 

Si cals | 
Sas = Prae 

For ee aa cas 

ened 
Install Git 


To install Git on Linux enter ‘sudo apt-get install git’. For OS X you can 
download binaries from: bit.ly/xCCrm, and Windows from here: bit.ly/P30owfw 
- double-click on the EXE or DMG to install. 


03 Complete install 

Depending on your operating system, the install process may be a 
little different, but shouldn't take too long. There is a GUI for GitHub available, 
but we'll be using the command line mostly. To test the install, in OS X or Linux 
open Terminal/Console, on Windows CMD, and enter ‘git’. You should see the 
help messages. 


oà We need to make sure that our server is secure and that only we can 
make changes lo it. For that we use a special file - an SSH key. SSH stands for 
Secure Shell, and using a key file is more secure than a simple password. 
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here are many version control 
systems, such as SVN, Aegis and 
Mercurial. One of the newer, but 
very popular choices, is Git. Git was 
developed by Linus Torvalds who 
created the Linux kernel. While it's 
possible to use Git purely locally, or 
over a LAN, its also great for 
deploying changes to a live or 
development website. This tutorial will assume a basic 
knowledge of how Git works, but will take you through all 
the steps needed to set up a local GitHub to server 
workflow allowing multiple users to collaborate, track 
changes and make branches as they see fit. Git also 
makes it very easy to roll back any changes you have 
made, in case any mistakes are made. Using GitHub you 
can easily see what changes each collaborator has made, 
and when, which is incredibly helpful when bug fixing. Git 
recently introduced a new GUI interface for OS X and 
Windows, which makes using Git even easier to designers 
and developers, although this tutorial will focus on using 
the command line, as it's more powerful. 


05 Create Git key 

In Terminal enter the command below, obviously replacing the email 
with the one you used to sign up for your Git account. You will be prompted 
on a location for the key; hit Enter to use default, and an optional passphrase. 
Once done, the key will be made, along with a fingerprint. 


06 Copy the keyfile 

We then need to copy the keyfile to our clipboard. You can do this 
manually if you want, or just enter the following into Terminal. If you put your 
key elsewhere, replace the ~/.ssh/id_rsa.pub part with its location. Once you've 
run that, you're ready to add it to GitHub. 


07 Gitaccount settings 

In your browser go to github.com, and then click on Account Settings 
in the top-right corner. Then in the left-hand column click on the SSH Key tab. 
Click Add SSH Key and give it a name, then paste the key into the key area. 
Then add the key. 


B ae ee tn ee 
os 


B ne re ene e 
oe 


‘The key fingerprint is: 
04242 124 1b7 115194 14717128 18d:8b 102 184:87169:52 kleronhthotmat | .com 
rondonart (nage 1s: 


|-Howards-HacBook-Pro-2:~ rachelcrabb$, 
|-Howards-HacBook-Pro-2:~ rache lcrabb$ 


< ~/.ssh/id_rsa.pub 


Test out SSH access 

Now we can test out our SSH access. In Terminal enter the code below, 
and then press Y and Enter to add the RSA key to your known hosts. You 
should then see a message similar to Hi kiksy! You've successfully 
authenticated, but GitHub does not provide shell access. 


09 Create a repository 

Back on github.com click on New Repository to make a new repo. 
Enter in a name and description and choose whether to make it public or 
private. For commercial development it might be wise to keep it private, but 
for personal projects or ones you wish for others to collaborate on, choosing 
to go public is a great option. 


10 Clone repo to local 


Now we want to clone that empty repo to our local machine, which 
can be done by entering the command below. Replace the kiksy part with 


your own username, and then the my-dev-repo with the name of the repo we 
just made, not forgetting to add the git. 


PAA Gown stmt» Visti 
© © G Carun, ne 8 rn te cominee 


u Create project 

You should then see the repo copied to your home directory, ready to 
be worked on. By default it will only contain a readme, and a gitignore if you 
choose to add that. Create a simple index.html page to test out the 
deployment process. We will then add this to our Git stage. 


Initial commit 

Once we have created our first file, we can add it to version control 
with the commands below. You will need to cd into the directory first - eg 
cd home/my-dev-repo. The add command adds everything in, then the 
commit -m command makes our commitment with a message. Finally git 
push origin master means we push the changes back to where they came on 
the master branch. 


View changes 

Head back to GitHub: github.com/kiksy/my-dev-repo, and you should 
see the new index.html file we just created appear in the main window. Next to 
it you should see the commit message that we just made in the command line. 
Clicking on the file will show you its contents. 
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Roche|-Hovards-HacSook-Pro-2:ay-dev-repo rachelcrabb$ git add . 
Rache|-Howarde-HacSook-Pro-2:my-dev-repo rachelcrabb$ git commit -m "Initial comit" 
185d) Initial commit 


that they 
| You con suppress this message by setting them explicitly: 


git config —global user nase “Your Nane" 
tt config —Glcbal ver amati joulemayple.com 


After doing this, you way fix the identity used for this commit with: 


‘git commit -amend --reset-author 


| 1 file changed, 25 insertions(+) 
Create node 108644 index.htal 
Roche -Hovards-NacBook-Pro-2:my-dev-repo rachelcrabb$ git push origin master 


To gitteitn coat tey/ayv-rwpo-gtt 
‘240i. 9618054 master -> master 
Roche | -Hovards-Nactook-Pro-2 :my-dev-repo racheicrapo$ [] 


#1/bin/bosh 
suport GIT_DIRe/var/wpa/ay-dev-repe/ git 


6 erin tee E 


merge origin/master 
it submodule update —init --recursive 


Voy maar = Flow Commits Branches Teor Downoace 
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Branching 
on live 


Running a dev and live branch 
on a server can be a handy 
way of quickly testing chang 


“u Live server setup to a live site, allowing for a 


Now lets set up our live server ready to receive changes (you'll need to swift change back if anything 
have SSH access already set up). SSH into it, and enter the commands below, 
replacing the my-dev-repo with your own repo. This folder will be where we 
push to, but the actual files will be linked using a hook. 


does go happen to go wrong 
Use git branch dev and git 
checkout dev commands 


5 Create a bare repo developement-site.com part with your own site's URL, and the my-dev-repo with 
Now we need to create a bare repo. This will contain a special your own repo. The command adds a remote called live, which can then be 
post-receive file, which we will use to trigger the copying of files once we push pushed or pulled from. 


to it from our local setup. Enter the code below to see a success message. 


Add remote e Create working directory 


A remote is a place where you can push or pull files or changes from Now, it is time for us to create the actual location on the server where 
another Git repository. Run the following commands, replacing the my- the files will be placed. Note there is no need to add a new directory, the git 
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clone will automatically make one for us. Once this has completed we are 
ready to edit our hooks files, 


Edit hooks 

From the Repos directory, change into the relevant Git repo ie 
my-dev-repo and then cd into the hidden hooks directory. We then need to 
create a new file called post-receive, which will run every time we push to the 
live server. Here we are using the nano text editor to create it, but you can use 
Vi or whichever is your favourite. 


[then copy the following to the file] 


® Change permissions 


It's very important to make sure that every file and directory has the 
correct permissions so that the code executes properly. We need to change 
the permissions on the post-receive file that we just created, but also make 
sure the working directory and Git repos are writable by your user. 


20 Adding the user 

Adding the user to our group ensures that we can push the files, and the 
post-receive hook runs, and then the files can successfully be moved and 
copied by the server user. Here we are changing the group and permissions for 
the ubuntu user, but you would change this to whichever you log in as. 


Push to live 


Now you can make some changes to your local site, and then push 
them up to live. Add some new lines to our index.html and then commit them 
with a message. Git push to the remote, and then the branch (by default 
master). You should then see the progress of the push. 


View results! 

Now you can open your site and view the changes. You can use the git 
log command to view a list of commits, and then roll back to them if you want 
to undo any changes that you or other people have made. 


ttest kieronhoward$ git push newdev master 
16, done. 


Writing objects: 100% (13/13), 114.36 KiB, done. 
Total 13 (delta 1), reused @ (delta 0) 
remote: From /var/Repos/testdev 

fct master 
Updating 3c86975..aa93fcf 


-> origin/master 


Bin 6148 -> 6148 bytes 


+ 


„ui. superType. name 
SismoFinder 
go-pear.php 
index.php 
sismo. php 
11 files changed, 3250 


1 
I 
! 
‘Type.container | 
| 
| 
| 
[i 
| 
i} 


snih 2 deletions(- 


ws 
mode 100644 .settings/org.eclipse 
remote: 160000 SismoFinder 
remote: 100644 go-pear. php 
remote: create mode 100644 sismo. php 
remote: No submodule mapping found in .gitmodules for path ‘SismoFinder’ 
To imaginedev:/var/Repos/testdev.git 
3¢86975..aa93fcf master -> mast 
kieron-howard:testtest kieronhowerd$ [] 


a aaa Terepinal—hesh — Maxaa] 


Resolving conflicts and 
other issues 


It's important to make sure that you keep each stage 


the deployment process in sync. Manually c 
1F TP or other met 


opyi 
files to the live server throu, 
can cause issues. T 


theliv 


command will pull back from the origin 
GitHub) and then merge the changes back in tomaster 
If there are still issues to resolve, you may need to use a 
merge tool such as WinMerge or the git-mergetool 
Once thei: 


es are resolved, you can commit again tc 


mark that e y thing is okay, then run the merge 


command a final time 


Web Design Tips, Tricks, & Fixes 219 


start using 
Cland the 


Hudson 
server 


Set up a continuous integration 
server to deploy updated code 
to web servers and locations 


tools | tech | trends Ubuntu Server, Hudson / Jenkins CI Server 


+ Step code 


Add source 

The easiest way to install a package on a Debian-based Linux 
distribution such as Ubuntu is via the apt-get command. We will begin by 
creating a new source file and then adding the location of the correct 
Hudson binary file for our distribution. To do so, open up a terminal window, 
connect to the server via SSH and run the following command to add the 
new source: 


02 Update and install 


With the new source added, we just need to update apt-get so that it 
can pick up all the new information. Once this process is complete, you should 
then install Hudson using apt-get. You will be asked to confirm to proceed. 
Accept all of the confirmations and finish off the process. The installation will 
not take very long at all. 


Test install 

Hudson has now been installed onto your server. An init file was 
created to launch Hudson as a daemon when the server starts up, and then 
anew user ‘hudson’ was also created to run the service. To confirm the 
installation was a success, open your browser and visit port 8080 on your 
domain or IP address 


04 Install plug-ins 


Hudson will provide you with the ability to install a wide range of 
plug-ins as part of the initial setup process. You can choose as many as you 
like, but for this tutorial we'll definitely select the Git and Subversion plug-ins so 


that we can deal with our source control repositories and obtain updated code. 
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anaging the constant updates, unit tests 
and deployments of various application 
code bases can quickly become hard to 
manage, and sometimes exhausting. If 
only there was a way to automate as much 
of this laborious work as possible and yet 
still maintain a high level of control over 
the processes. 

Introducing Hudson, a continuous 
integration (CI) server built to manage all of these issues and 
much more. Ideal for large teams and individual developers, 
Hudson lets you stay on top of your applications as you write 
them, and can be customised to perform unit tests and code 
quality checks, helping to ensure your code doesn't cause 
issues after it's been deployed. 

Hudson supports SCM tools including CVS, Subversion and 
Git and can execute Apache Ant- and Maven-based projects, 
as well as arbitrary shell scripts and Windows batch 
commands. It is also highly extensible via various plug-ins. 

In this tutorial we will set up our own continuous integration 
server using the open source Hudson package. We will 
configure Hudson to communicate with Git repositories, run 
automated tasks using Apache Ant and deploy the updated 
code directly to our testing web server. 


Hudson CI Server Initial Setup © 


Core Compatibility Plugins 
“Thee core plugins provide hey extensions to Haden to ensure maximum compatiblity witha wide range of Ird party plugins and Operating Systems 
funtion. Aktboup thew pln ar pt required we srongly recomend that yu natal them 1o enaure raximm corpaliity with he exiting rang of 
Sie party Huon pln 
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Install Git 

We want Hudson to interact with our remote Git repositories, which 
means we need to make sure that we also have Git installed on the server. 
Open up the terminal window with an active server session and enter the 
following command to install the Git onto the server. 


G01 > sudo apt-get install git-core 


Hudson Git access 

Let's ensure Hudson can read from any public-facing Git repository we 
provide. We'll need to switch the command line to act as the hudson user, 
navigate into the base Hudson install path and define the global Git 
configuration values for the user. Run the following commands to achieve this. 


> ed /var/lib/hudson 
a sudo -Hiu Hudson — 
> git config -global user rane 


3 _ user.name “hi À 
> git config -global user.email sead OUr ; 


07 Security and authentication 

By default, the Hudson interface is open to all users. Select Manage 
Hudson>Configure Security from the menu. Select to enable security, and 
choose Hudson's own database for access control. Authorisation will be 
matrix-based. Give Anonymous users read-only access, and add a new user 
name for yourself with full access. Save to proceed, 


Se Configure Security 
B saaman 


Create user 

You will then be taken to a Sign Up form to finalise the user account 
creation. Enter the same username given to the access matrix in the last step 
and add the rest of your details. Once complete, the system will assign the 
correct roles to your user and log you in automatically. 


masas 


ieosce 


Integrated into 
the IDE 


ne development applications 
offer Hud server integration 
Eclipse, for example, gives you a 
specific build panel which can 
control any number of Hudson 
servers and tasks. This means 
you can generate new builds 
without leaving your IDE 


09 System configurations 


" Select Configure System from the Hudson management menu. Now 
set the name and JAVA_HOME properties for the Java JDK package to use 
with our Hudson install. We'll also set a new Ant configuration and request it to 
be installed automatically by Hudson with the latest version from Apache. Save 
the changes. 


30K installations 20K 
Mame [Open JK 6 


JAVA HOME (js fity/vm/java-6-openjdh-ama64] 


C Instali automatically e 


CE 
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Git instatations 


Delete Git 


Ant 


‘Ant instatations Ant 
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ewe 


Select New Job from the menu. Give the job a meaningful name and 


select ‘Build a free-style software job’ from the list. Continue and select Git from 


the Source Code Management options. Enter the read-only URL of any public 
Git repository into the input box. Select Poll SCM and add * * * * * for the 


Schedule value. 


Ant builds 

Select Invoke Ant as a build step and then select the Ant Version that 
we created earlier on in the global configuration. After that, set ‘build’ as the 
value for the target. We'll be creating the actual build script very shortly, but 
we're going to want it to perform a specific task when Hudson runs it with 
every new build of a job. Save and complete the job. 


Suita Triggers 
Buha after other joba are buat e 
‘Trigger builds remotely (e.9., from scripts) e 

E Pon scm e 

‘Schedule ico —— = e 
Buia periosicaly e 

uit 
Invoke Ant e 


No build file 

The first time you run the new job, it will most likely fail due to the lack 
of the build.xml file to perform the Ant tasks. Hudson lets you easily see the 
process and any success or error messages through the returned console 
output, viewable within each individual build. 


B Create build script 

In your SSH session to the server, navigate to the location of the 
workspace directory within the Hudson job. Create a new file within this folder 
called build.xml, into which we'll write the tasks we want to be performed after 
the code has been updated. The contents for the script can be found in the 
tutorial assets. 


> cd /var/lib/hudson/jobs/name of your job/workspace 
> sudo nano build.xml 
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File: build.xml 


w Build properties 

The Ant script requests a properties file, which will hold some values for 
the server directory path into which we want to deploy the code from the 
Hudson job. Create this file in the same workspace location and enter the 
location for the current job workspace directory and the website location to 
deploy to. We also make the website directory writable. 


> sudo chmod -R 777 /var/www/ 

> sudo nano build.properties 

# properties content 

build. dir=/var/ww 

hudson. dir=/var/lib/hudson/jobs/name of your job/workspace 


Build success 

Running another build manually from the Hudson dashboard should at 
this point display a success message, as well as showing any output from the 
Ant tasks used in the process. Let's now test the SCM triggers and push a new 
index.html file to replace the default Apache file using Git. 


16 Git push 

Create a new index.html file in your local Git repository, add and 
commit it to Git and push it to the relevant branch on your origin / remote 
repository. Hudson will check the source repository every minute for a change, 
and once found will run a new build. Hudson will also show you the commit 
message from the repository. 


Morethanjustdeployments 


In this tutorial we have focused on setting up the Hudson Cl server and 
creating our first simple job to automate code deployment 

Hudson is an incredibly powerful tool and, as you may have noticed, it 
can manage so much more than this 

Hudson isa great way to perform unit tests on your code base once it 
has retrieved it from your source control management rer ries. JUnit 
tests (and other libraries) can be included to sanity-check, test and verify 
your code prior to it being deployed to any servers. If it's broken or doesn't 
meet any requirements you place onit, the process halts asa fail and can 
generate detailed reports for you, which can be archived, all of which 


helps you maintain a strong code base and application 


Mega 
documentation 


Hudson is incredibly well 
documented, and a free 
Hudson book is available 
online in a number of 
formats to help you 
dig deeper: 


Paces 


[—" 


v Continuous integration 

Following the latest build generated from the code update pushed to 
the repository, we can see that the default Apache holding page has been 
replaced by our revised index.html file. Hudson can keep your testing, staging 
or production sites constantly up to date with the latest code as you build it, 
streamlining your workflow! 


BDO © wrz ` wn — we Z 


ere Omane ttt at 


Welcome to the Golden Dawn homepage 


‘This inde bal le wa istega veing Hudson reve updated code fon Gi. 


Code library 
Tasks in detail 


A closer look at the Ant tasks, to see what happens when building our code 


The build task, run by 
Hudson, willexecute 
another task to perform 
the copy function to the 
web location. 


Copying the files over, we 
specify the destination 
directory and remove 
any files we don't want 
totransfer. 


Anoptional task you 
could implement would 
clean out the destination 
directory contents prior 
tocopying new files over. 


001 <?xml version=“1.0” encoding=“UTF-8”?> 
<project default=“test.ant” name=“My Build File” 
basedir=”.”> 
<property file=“build.properties”/> 
<target name=“test.ant” description=“The 
default task in the build file.”> 
BB <echo message=“Testing ant in this 
environment. “ /> 
</target> 
<target name=“build” depends=“build. copy. 
files” 
GBF description=“All of the stuff surrounding 
creating a clean copy of the build” /> 


OH <target name=“build. copy. files” 
description=“Copy clean code to the web root.”> 
002 <echo message="Copying Files to build 
Location”/> 
BB <copy todir="$(build. 
dir}” preservelastmodified=“false” 
overwrite=“true”> 
<fileset dir=“${hudson.dir}”> 
<exclude name=‘settings.xml’/> 
<exclude name=‘build.properties’ /> 
<exclude name=‘.project’ /> 
<exclude name=‘. settings’ /> 
<exclude name=‘.settings/**’ /> 
<exclude name=‘build. xml’ /> 
<exclude name=‘%/.DS_Store’/> 
<exclude name=‘ .DS_Store’ /> 
<exclude name=‘archives/’/> 
</fileset> 
</copy> 
<echo message=“Clearing out extraneous 
files.”/> 
<delete file=‘${build.dir}/.settings’ /> 
<delete dir=‘${build.dir}/test’ /> 
</target> 


Bi <target name="build. remove.web.contents” 
description="I remove all contents from the web 
root folder.”> 
LA <echo message=“Deleting contents from 
${build. dir}” /> 

<delete includeEmptyDirs=“true”> 

<fileset dir=“${build.dir}” includes=“#x/x” 
defaultexcludes=“no”/> 

</delete> 

<echo message=“Web root contents deleted.” 
/> 


w </target> 
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On your free disc 


Check out the great bonus content on your disc 


Design Tips, Tricks & Fixes we've 
worked with a number of well- ae 
known and well-equipped developers Web Design 
in order to put together a great starter : 

pack for site customisation. If you pop 
your free disc into your machine and 
check out the Resources tab then you 
will find a bunch of templates and 
themes covering HTML, Photoshop and 
WordPress. Staying with Photoshop for a 
moment, we've also provided you with 
a pack of scribble and doodle brushes 
as well as five premium typefaces, so 
next time you're restyling your interface 

you can bring that personal touch to the ESSENTIAL TOOLS AND TRENDS 
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and more. The real Swiss Army knife, 
however, is the collection of 200 tools 
and trends that ties in with the opening 
feature to this bookazine — keep this 
on-screen as you read in order to access 
quick links to every tool. As usual, we 
also have screencasts and tutorial assets 
for you, so boot it up and get cracking! 


Tutorial files 
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Place the CD in your 
drive. Depending on your 
preferences, the disc’s 
icon should pop up on 
your desktop (or in your 
Finder Window Sidebar) 
and its Finder window will 
open. Double-click the 
‘launch_disc,html’ icon 
and the disc interface 

will open. Now click the 
listings on the left of the 
panel to start exploring 
your free content. 


TYPODERMIC FONTS 


5 Fantastic fonts worth $150 
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HTML5 » CSS3 v jQuery v PHP «~ Photoshop 


Develop and deploy 
professional, modern sites 


Unlocking the potential of web design 
Word ee eogi 
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Tips 
Harness modern tools and ae = 
frameworks in order to refresh 
your code and layouts 


Tricks oB i 
Integrate rich and dynamic f | i@8C® A arene A | 
graphics, animations and , i a : = 
media into your web pages 


Fixes s ai ma 
Improve your site with deft y's a o M 
solutions to common issues, 
and master best practices 


On your free disc... prgprg 


200 web tools plus tutorial asset packs | | | | 
HTML, Photoshop and WordPress templates 
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